前言
什么是數據雙向綁定？
vue是一個mvvm框架，即數據雙向綁定，即當數據發生變化的時候，視圖也就發生變化，當視圖發生變化的時候，數據也會跟着同步變化。這也算是vue的精髓之處了。值得注意的是，我們所說的數據雙向綁定，一定是對於UI控件來說的，非UI控件不會涉及到數據雙向綁定。 單向數據綁定是使用狀態管理工具（如redux）的前提。如果我們使用vuex，那么數據流也是單項的，這時就會和雙向數據綁定有沖突，我們可以這么解決。
為什么要實現數據的雙向綁定？
在vue中，如果使用vuex，實際上數據還是單向的，之所以說是數據雙向綁定，這是用的UI控件來說，對於我們處理表單，vue的雙向數據綁定用起來就特別舒服了。
即兩者並不互斥， 在全局性數據流使用單項，方便跟蹤； 局部性數據流使用雙向，簡單易操作。
一、訪問器屬性
Object.defineProperty()函數可以定義對象的屬性相關描述符， 其中的set和get函數對於完成數據雙向綁定起到了至關重要的作用，下面，我們看看這個函數的基本使用方式。
var obj = { foo: 'foo' } Object.defineProperty(obj, 'foo', { get: function () { console.log('將要讀取obj.foo屬性'); }, set: function (newVal) { console.log('當前值為', newVal); } }); obj.foo; // 將要讀取obj.foo屬性 obj.foo = 'name'; // 當前值為 name
可以看到，get即為我們訪問屬性時調用，set為我們設置屬性值時調用。
二、簡單的數據雙向綁定實現方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>forvue</title> </head> <body> <input type="text" id="textInput"> 輸入：<span id="textSpan"></span> <script> var obj = {}, textInput = document.querySelector('#textInput'), textSpan = document.querySelector('#textSpan'); Object.defineProperty(obj, 'foo', { set: function (newValue) { textInput.value = newValue; textSpan.innerHTML = newValue; } }); textInput.addEventListener('keyup', function (e) { obj.foo = e.target.value; }); </script> </body> </html>
最終效果圖：
可以看到，實現一個簡單的數據雙向綁定還是不難的： 使用Object.defineProperty()來定義屬性的set函數，屬性被賦值的時候，修改Input的value值以及span中的innerHTML；然后監聽input的keyup事件，修改對象的屬性值，即可實現這樣的一個簡單的數據雙向綁定。
三、 實現任務的思路
上面我們只是實現了一個最簡單的數據雙向綁定，而我們真正希望實現的時下面這種方式：
<div id="app"> <input type="text" v-model="text"> {{ text }} </div> <script> var vm = new Vue({ el: '#app', data: { text: 'hello world' } }); </script>
即和vue一樣的方式來實現數據的雙向綁定。那么，我們可以把整個實現過程分為下面幾步：
- 輸入框以及文本節點與 data 中的數據綁定
- 輸入框內容變化時，data 中的數據同步變化。即 view => model 的變化。
- data 中的數據變化時，文本節點的內容同步變化。即 model => view 的變化。
四、DocumentFragment
如果希望實現任務一，我們還需要使用到 DocumentFragment 文檔片段，可以把它看做一個容器，如下所示：
<div id="app"> </div> <script> var flag = document.createDocumentFragment(), span = document.createElement('span'), textNode = document.createTextNode('hello world'); span.appendChild(textNode); flag.appendChild(span); document.querySelector('#app').appendChild(flag) </script>
這樣，我們就可以得到下面的DOM樹：
使用文檔片段的好處在於：在文檔片段上進行操作DOM，而不會影響到真實的DOM，操作完成之后，我們就可以添加到真實DOM上，這樣的效率比直接在正式DOM上修改要高很多 。
vue進行編譯時，就是將掛載目標的所有子節點劫持到DocumentFragment中，經過一番處理之后，再將DocumentFragment整體返回插入掛載目標。
如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>forvue</title> </head> <body> <div id="app"> <input type="text" id="a"> <span id="b"></span> </div> <script> var dom = nodeToFragment(document.getElementById('app')); console.log(dom); function nodeToFragment(node) { var flag = document.createDocumentFragment(); var child; while (child = node.firstChild) { flag.appendChild(child); } return flag; } document.getElementById('app').appendChild(dom); </script> </body> </html>
即首先獲取到div，然后通過documentFragment劫持，接着再把這個文檔片段添加到div上去。
五、初始化數據綁定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>forvue</title> </head> <body> <div id="app"> <input type="text" v-model="text"> {{ text }} </div> <script> function compile(node, vm) { var reg = /\{\{(.*)\}\}/; // 節點類型為元素 if (node.nodeType === 1) { var attr = node.attributes; // 解析屬性 for (var i = 0; i < attr.length; i++) { if (attr[i].nodeName == 'v-model') { var name = attr[i].nodeValue; // 獲取v-model綁定的屬性名 node.value = vm.data[name]; // 將data的值賦值給該node node.removeAttribute('v-model'); } } } // 節點類型為text if (node.nodeType === 3) { if (reg.test(node.nodeValue)) { var name = RegExp.$1; // 獲取匹配到的字符串 name = name.trim(); node.nodeValue = vm.data[name]; // 將data的值賦值給該node } } } function nodeToFragment(node, vm) { var flag = document.createDocumentFragment(); var child; while (child = node.firstChild) { compile(child, vm); flag.appendChild(child); // 將子節點劫持到文檔片段中 } return flag; } function Vue(options) { this.data = options.data; var id = options.el; var dom = nodeToFragment(document.getElementById(id), this); // 編譯完成后，將dom返回到app中。 document.getElementById(id).appendChild(dom); } var vm = new Vue({ el: 'app', data: { text: 'hello world' } }); </script> </body> </html>
以上的代碼實現而立任務一，我們可以看到，hello world 已經呈現在了輸入框和文本節點中了。
六、響應式的數據綁定
我們再來看看任務二的實現思路： 當我們在輸入框輸入數據的時候，首先觸發的時input事件（或者keyup、change事件），在相應的事件處理程序中，我們獲取輸入框的value並賦值給vm實例的text屬性。 我們會利用defineProperty將data中的text設置為vm的訪問器屬性，因此給vm.text賦值，就會觸發set方法。 在set方法中主要做兩件事情，第一是更新屬性的值，第二留在任務三種說。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>forvue</title> </head> <body> <div id="app"> <input type="text" v-model="text"> {{ text }} </div> <script> function compile(node, vm) { var reg = /\{\{(.*)\}\}/; // 節點類型為元素 if (node.nodeType === 1) { var attr = node.attributes; // 解析屬性 for (var i = 0; i < attr.length; i++) { if (attr[i].nodeName == 'v-model') { var name = attr[i].nodeValue; // 獲取v-model綁定的屬性名 node.addEventListener('input', function (e) { // 給相應的data屬性賦值，進而觸發屬性的set方法 vm[name] = e.target.value; }) node.value = vm[name]; // 將data的值賦值給該node node.removeAttribute('v-model'); } } } // 節點類型為text if (node.nodeType === 3) { if (reg.test(node.nodeValue)) { var name = RegExp.$1; // 獲取匹配到的字符串 name = name.trim(); node.nodeValue = vm[name]; // 將data的值賦值給該node } } } function nodeToFragment(node, vm) { var flag = document.createDocumentFragment(); var child; while (child = node.firstChild) { compile(child, vm); flag.appendChild(child); // 將子節點劫持到文檔片段中 } return flag; } function Vue(options) { this.data = options.data; var data = this.data; observe(data, this); var id = options.el; var dom = nodeToFragment(document.getElementById(id), this); // 編譯完成后，將dom返回到app中。 document.getElementById(id).appendChild(dom); } var vm = new Vue({ el: 'app', data: { text: 'hello world' } }); function defineReactive(obj, key, val) { // 響應式的數據綁定 Object.defineProperty(obj, key, { get: function () { return val; }, set: function (newVal) { if (newVal === val) { return; } else { val = newVal; console.log(val); // 方便看效果 } } }); } function observe (obj, vm) { Object.keys(obj).forEach(function (key) { defineReactive(vm, key, obj[key]); }); } </script> </body> </html>
以上，任務二也就完成了，text屬性值會和輸入框的內容同步變化。
七、 訂閱/發布模式（subscribe & publish）
text屬性變化了，set方法觸發了，但是文本節點的內容沒有變化。 如何才能讓同樣綁定到text的文本節點也同步變化呢？ 這里又有一個知識點： 訂閱發布模式。
訂閱發布模式又稱為觀察者模式，定義了一種一對多的關系，讓多個觀察者同時監聽某一個主題對象，這個主題對象的狀態發生改變時就會通知所有的觀察者對象。
發布者發出通知 =>主題對象收到通知並推送給訂閱者 => 訂閱者執行相應的操作。
// 一個發布者 publisher，功能就是負責發布消息 - publish var pub = { publish: function () { dep.notify(); } } // 多個訂閱者 subscribers， 在發布者發布消息之后執行函數 var sub1 = { update: function () { console.log(1); } } var sub2 = { update: function () { console.log(2); } } var sub3 = { update: function () { console.log(3); } } // 一個主題對象 function Dep() { this.subs = [sub1, sub2, sub3]; } Dep.prototype.notify = function () { this.subs.forEach(function (sub) { sub.update(); }); } // 發布者發布消息， 主題對象執行notify方法，進而觸發訂閱者執行Update方法 var dep = new Dep(); pub.publish();
不難看出，這里的思路還是很簡單的： 發布者負責發布消息、 訂閱者負責接收接收消息，而最重要的是主題對象，他需要記錄所有的訂閱這特消息的人，然后負責吧發布的消息通知給哪些訂閱了消息的人。
所以，當set方法觸發后做的第二件事情就是作為發布者發出通知： “我是屬性text，我變了”。 文本節點作為訂閱者，在接收到消息之后執行相應的更新動作。
八、 雙向綁定的實現
回顧一下，每當new一個Vue，主要做了兩件事情：第一是監聽數據：observe(data)，第二是編譯HTML：nodeToFragment(id)
在監聽數據的過程中，會為data中的每一個屬性生成一個主題對象dep。
在編譯HTML的過程中，會為每一個與數據綁定相關的節點生成一個訂閱者 watcher，watcher會將自己添加到相應屬性的dep中。
我們已經實現了： 修改輸入框內容 => 在事件回調函數中修改屬性值 => 觸發屬性的set方法。
接下來我們要實現的是： 發出通知 dep.notify() => 觸發訂閱者update方法 => 更新視圖。
這里的關鍵邏輯是： 如何將watcher添加到關聯屬性的dep中。
function compile(node, vm) { var reg = /\{\{(.*)\}\}/; // 節點類型為元素 if (node.nodeType === 1) { var attr = node.attributes; // 解析屬性 for (var i = 0; i < attr.length; i++) { if (attr[i].nodeName == 'v-model') { var name = attr[i].nodeValue; // 獲取v-model綁定的屬性名 node.addEventListener('input', function (e) { // 給相應的data屬性賦值，進而觸發屬性的set方法 vm[name] = e.target.value; }) node.value = vm[name]; // 將data的值賦值給該node node.removeAttribute('v-model'); } } } // 節點類型為text if (node.nodeType === 3) { if (reg.test(node.nodeValue)) { var name = RegExp.$1; // 獲取匹配到的字符串 name = name.trim(); // node.nodeValue = vm[name]; // 將data的值賦值給該node new Watcher(vm, node, name); } } }
在編譯HTML的過程中，為每個和data關聯的節點生成一個Watcher。那么Watcher函數中發生了什么呢？
function Watcher(vm, node, name) { Dep.target = this; this.name = name; this.node = node; this.vm = vm; this.update(); Dep.target = null; } Watcher.prototype = { update: function () { this.get(); this.node.nodeValue = this.value; }, // 獲取data中的屬性值 get: function () { this.value = this.vm[this.name]; // 觸發相應屬性的get } }
首先，將自己賦值給了一個全局變量 Dep.target;
其次，執行了update方法，進而執行了 get 方法，get方法讀取了vm的訪問器屬性， 從而觸發了訪問器屬性的get方法，get方法將該watcher添加到對應訪問器屬性的dep中；
再次，獲取順序性的值， 然后更新視圖。
最后將Dep.target設置為空。 因為他是全局變量，也是watcher和dep關聯的唯一橋梁，任何時候，都必須保證Dep.target只有一個值。
最終如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>forvue</title> </head> <body> <div id="app"> <input type="text" v-model="text"> <br> {{ text }} <br> {{ text }} </div> <script> function observe(obj, vm) { Object.keys(obj).forEach(function (key) { defineReactive(vm, key, obj[key]); }); } function defineReactive(obj, key, val) { var dep = new Dep(); // 響應式的數據綁定 Object.defineProperty(obj, key, { get: function () { // 添加訂閱者watcher到主題對象Dep if (Dep.target) { dep.addSub(Dep.target); } return val; }, set: function (newVal) { if (newVal === val) { return; } else { val = newVal; // 作為發布者發出通知 dep.notify() } } }); } function nodeToFragment(node, vm) { var flag = document.createDocumentFragment(); var child; while (child = node.firstChild) { compile(child, vm); flag.appendChild(child); // 將子節點劫持到文檔片段中 } return flag; } function compile(node, vm) { var reg = /\{\{(.*)\}\}/; // 節點類型為元素 if (node.nodeType === 1) { var attr = node.attributes; // 解析屬性 for (var i = 0; i < attr.length; i++) { if (attr[i].nodeName == 'v-model') { var name = attr[i].nodeValue; // 獲取v-model綁定的屬性名 node.addEventListener('input', function (e) { // 給相應的data屬性賦值，進而觸發屬性的set方法 vm[name] = e.target.value; }) node.value = vm[name]; // 將data的值賦值給該node node.removeAttribute('v-model'); } } } // 節點類型為text if (node.nodeType === 3) { if (reg.test(node.nodeValue)) { var name = RegExp.$1; // 獲取匹配到的字符串 name = name.trim(); // node.nodeValue = vm[name]; // 將data的值賦值給該node new Watcher(vm, node, name); } } } function Watcher(vm, node, name) { Dep.target = this; this.name = name; this.node = node; this.vm = vm; this.update(); Dep.target = null; } Watcher.prototype = { update: function () { this.get(); this.node.nodeValue = this.value; }, // 獲取data中的屬性值 get: function () { this.value = this.vm[this.name]; // 觸發相應屬性的get } } function Dep () { this.subs = []; } Dep.prototype = { addSub: function (sub) { this.subs.push(sub); }, notify: function () { this.subs.forEach(function (sub) { sub.update(); }); } } function Vue(options) { this.data = options.data; var data = this.data; observe(data, this); var id = options.el; var dom = nodeToFragment(document.getElementById(id), this); // 編譯完成后，將dom返回到app中。 document.getElementById(id).appendChild(dom); } var vm = new Vue({ el: 'app', data: { text: 'hello world' } }); </script> </body> </html>
參考文章：