Vue.js雙向綁定實現原理詳解

更新時間：2016年12月22日 09:37:34 作者：kidney

這篇文章主要為大家詳細介紹了Vue.js雙向綁定實現原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Vue.js最核心的功能有兩個，一是響應式的數據綁定系統(tǒng)，二是組件系統(tǒng)。本文僅探究幾乎所有Vue的開篇介紹都會提到的hello world雙向綁定是怎樣實現的。先講涉及的知識點，再參考源碼，用盡可能少的代碼實現那個hello world開篇示例。

參考文章：http://www.fzitv.net/article/100819.htm

一、訪問器屬性

訪問器屬性是對象中的一種特殊屬性，它不能直接在對象中設置，而必須通過defineProperty()方法單獨定義。

var obj = { };

// 為obj定義一個名為hello的訪問器屬性

Object.defineProperty(obj, "hello", {

get: function () {return sth},

set: function (val) {/* do sth */}

})

obj.hello // 可以像普通屬性一樣讀取訪問器屬性

訪問器屬性的"值"比較特殊，讀取或設置訪問器屬性的值，實際上是調用其內部特性：get和set函數。

obj.hello // 讀取屬性，就是調用get函數并返回get函數的返回值

obj.hello = "abc" // 為屬性賦值，就是調用set函數，賦值其實是傳參

get和set方法內部的this都指向obj，這意味著get和set函數可以操作對象內部的值。另外，訪問器屬性的會"覆蓋"同名的普通屬性，因為訪問器屬性會被優(yōu)先訪問，與其同名的普通屬性則會被忽略（也就是所謂的被"劫持"了）。

二、極簡雙向綁定的實現

此例實現的效果是：隨文本框輸入文字的變化，span中會同步顯示相同的文字內容；在js或控制臺顯式的修改obj.name的值，視圖會相應更新。這樣就實現了model =>view以及view => model的雙向綁定，并且是響應式的。

以上就是Vue實現雙向綁定的基本原理。

三、分解任務

上述示例僅僅是為了說明原理。我們最終要實現的是：

首先將該任務分成幾個子任務：

　　 1、輸入框以及文本節(jié)點與data中的數據綁定

　　 2、輸入框內容變化時，data中的數據同步變化。即view => model的變化。

　　 3、data中的數據變化時，文本節(jié)點的內容同步變化。即model => view的變化。

要實現任務一，需要對DOM進行編譯，這里有一個知識點：DocumentFragment。

四、DocumentFragment

DocumentFragment（文檔片段）可以看作節(jié)點容器，它可以包含多個子節(jié)點，當我們將它插入到DOM中時，只有它的子節(jié)點會插入目標節(jié)點，所以把它看作一組節(jié)點的容器。使用DocumentFragment處理節(jié)點，速度和性能遠遠優(yōu)于直接操作DOM。Vue進行編譯時，就是將掛載目標的所有子節(jié)點劫持（真的是劫持）到DocumentFragment中，經過一番處理后，再將DocumentFragment整體返回插入掛載目標。

五、數據初始化綁定

以上代碼實現了任務一，我們可以看到，hello world已經呈現在輸入框和文本節(jié)點中。

六、響應式的數據綁定

再來看任務二的實現思路：當我們在輸入框輸入數據的時候，首先觸發(fā)input事件（或者keyup、change事件），在相應的事件處理程序中，我們獲取輸入框的value并賦值給vm實例的text屬性。我們會利用defineProperty將data中的text劫持為vm的訪問器屬性，因此給vm.text賦值，就會觸發(fā)set方法。在set方法中主要做兩件事，第一是更新屬性的值，第二留到任務三再說。