VUE 特性一 資料雙向繫結

vue是一種mvvm開發模式，vue 區別於react 等其他前端框架的重要特性之一是vue 實現了 資料與檢視的雙向繫結。

如果要實現乙個輸入特定資訊的輸入框的雙向繫結，傳統做法與vue 框架下的示例：

<

!doctype html>
資料雙向繫結實現<
/title>
"utf-8"
>
"vue.js"
>
<
/script>
<
/head>
"traditionaldemo"
>
非框架 demo"city" value=
"yueyang"
/>
"debug"
>yueyang<
/div>
<
/div>
"vuedemo"
>
vue demo"city"
/>
}<
/div>
<
/div>
// 非框架下 js 示例
let citydom = document.
getelementbyid
('city'
)let debugdom = document.
getelementbyid
('debug'
)// 方法一：將資料儲存在字串型別的變數中
// let city = 'yueyang'
// citydom.value = city
// debugdom.innerhtml = city
// citydom.oninput = function(e)
// 方法二:通常我們將這個資料與其他資料一起儲存在物件中
let msg =
// 通過儲存描述符定義物件屬性
object.
defineproperty
(msg,
'city',,
enumerable:
true
, configurable:
true})
// 通過資料描述符定義物件屬性
// object.defineproperty(msg, 'city',)
// 通過字面量形式定義物件與物件屬性
// let msg = 
citydom.
oninput
=function
(e)// vue js 示例
newvue(}
)<
/script>
<
/body>
<
/html>

檢視變化更新資料

citydom.

oninput
=function
(e)

資料變化更新檢視

object.

defineproperty
(msg,
'city',,
enumerable:
true
, configurable:
true
})

vue 採用發布訂閱模式實現檢視和資料的雙向繫結，主要有以下功能模組：

***（observer）：負責監聽所有物件屬性的變化。其實現核心方法就是前文用到的的object.defineproperty( )。通過遞迴遍歷所有屬性值，並對其屬性定義實現對所有屬性的監聽。

訊息訂閱器(dep)：主要負責收集訂閱者，然後當屬性變化時執行對應訂閱者的更新函式。

編譯器（compile）：主要負責解析模板指令並替換模板資料，初始化檢視、將模板指令對應的節點繫結對應的更新函式，初始化相應的訂閱器。

訂閱者(watcher)：負責接收屬性的變化通知並執行相應的函式，然後更新檢視。

vue雙向資料繫結

話術 vue中v model可以實現雙向繫結，其核心思想通過object.definepropery來對vue的資料進行資料劫持。主要分為四部分 第一部分observer主要是負責對vue資料進行資料劫持，使其資料擁有get和set方法 第二部分指令解析器負責繫結資料和指令，繫結試圖更新方法 第三部...

vue雙向資料繫結

1.資料響應式原理 主要是利用object.defineproterty 來自定義object的getter,setter function observe value,cb function definereactive obj,key,val,cb set newval class vue da...

Vue學習筆記 一（資料繫結 指令）

插值 text span text span 只需渲染一次，後續變化不再關心 text span 三個大括號插入html片段，html test 表示式，表示式後可跟過濾符 還可自定義資料繫結的符號 vue.config.delimiters vue.config.unsafedelimiters ...