1. 前言

本文適合于學習Vue源碼的初級學者，閱讀后，你將對Vue的數據雙向綁定原理有一個大致的了解，認識Observer、Compile、Wathcer三大角色（如下圖所示）以及它們所發揮的功能。

本文將一步步帶你實現簡易版的數據雙向綁定，每一步都會詳細分析這一步要解決的問題以及代碼為何如此寫，因此，在閱讀完本文后，希望你能自己動手實現一個簡易版數據雙向綁定。

2. 代碼實現2.1 目的分析

本文要實現的效果如下圖所示：

本文用到的HTML和JS主體代碼如下：

<div id='app'> <h1 v-text='msg'></h1> <input type='text' v-model='msg'> <div> <h1 v-text='msg2'></h1> <input type='text' v-model='msg2'> </div></div>

let vm = new Vue({ el: '#app', data: { msg: 'hello world', msg2: 'hello xiaofei' } })

我們將按照下面三個步驟來實現：

第一步：將data中的數據同步到頁面上，實現 M ==> V 的初始化； 第二步：當input框中輸入值時，將新值同步到data中，實現 V ==> M 的綁定； 第三步：當data數據發生更新的時候，觸發頁面發生變化，實現 M ==> V 的綁定。 2.2 實現過程2.2.1 入口代碼

首先，我們要創造一個Vue類，這個類接收一個 options 對象，同時，我們要對 options 對象中的有效信息進行保存；

然后，我們有三個主要模塊：Observer、Compile、Wathcer，其中，Observer用來數據劫持的，Compile用來解析元素，Wathcer是觀察者。可以寫出如下代碼：（Observer、Compile、Wathcer這三個概念，不用細究，后面會詳解講解）。

class Vue { // 接收傳進來的對象 constructor(options) { // 保存有效信息 this.$el = document.querySelector(options.el); this.$data = options.data; // 容器: {屬性1: [wathcer1, wathcer2...], 屬性2: [...]}，用來存放每個屬性觀察者 this.$watcher = {}; // 解析元素: 實現Compile this.compile(this.$el); // 要解析元素, 就得把元素傳進去 // 劫持數據: 實現 Observer this.observe(this.$data); // 要劫持數據, 就得把數據傳入 } compile() {} observe() {} }2.2.2 頁面初始化

在這一步，我們要實現頁面的初始化，即解析出v-text和v-model指令，并將data中的數據渲染到頁面中。

這一步的關鍵在于實現compile方法，那么該如何解析el元素呢？思路如下：

首先要獲取到el下面的所有子節點，然后遍歷這些子節點，如果子節點還有子節點，那我們就需要用到遞歸的思想； 遍歷子節點找到所有有指令的元素，并將對應的數據渲染到頁面中。

代碼如下：（主要看compile那部分）

class Vue { // 接收傳進來的對象 constructor(options) { // 獲取有用信息 this.$el = document.querySelector(options.el); this.$data = options.data; // 容器: {屬性1: [wathcer1, wathcer2...], 屬性2: [...]} this.$watcher = {}; // 2. 解析元素: 實現Compile this.compile(this.$el); // 要解析元素, 就得把元素傳進去 // 3. 劫持數據: 實現 Observer this.observe(this.$data); // 要劫持數據, 就得把數據傳入 } compile(el) { // 解析元素下的每一個子節點, 所以要獲取el.children // 備注: children 返回元素集合, childNodes返回節點集合 let nodes = el.children; // 解析每個子節點的指令 for (var i = 0, length = nodes.length; i < length; i++) {let node = nodes[i];// 如果當前節點還有子元素, 遞歸解析該節點if(node.children){ this.compile(node);}// 解析帶有v-text指令的元素if (node.hasAttribute('v-text')) { let attrVal = node.getAttribute('v-text'); node.textContent = this.$data[attrVal]; // 渲染頁面}// 解析帶有v-model指令的元素if (node.hasAttribute('v-model')) { let attrVal = node.getAttribute('v-model'); node.value = this.$data[attrVal];} } } observe(data) {} }

這樣，我們就實現頁面的初始化了。

2.2.3 視圖影響數據

因為input帶有v-model指令，因此我們要實現這樣一個功能：在input框中輸入字符，data中綁定的數據發生相應的改變。

我們可以在input這個元素上綁定一個input事件，事件的效果就是：將data中的相應數據修改為input中的值。

這一部分的實現代碼比較簡單，只要看標注那個地方就明白了，代碼如下：

class Vue { constructor(options) { this.$el = document.querySelector(options.el); this.$data = options.data; this.$watcher = {};this.compile(this.$el); this.observe(this.$data); } compile(el) { let nodes = el.children; for (var i = 0, length = nodes.length; i < length; i++) {let node = nodes[i];if(node.children){ this.compile(node);}if (node.hasAttribute('v-text')) { let attrVal = node.getAttribute('v-text'); node.textContent = this.$data[attrVal];}if (node.hasAttribute('v-model')) { let attrVal = node.getAttribute('v-model'); node.value = this.$data[attrVal]; // 看這里！！只多了三行代碼！！ node.addEventListener('input', (ev)=>{ this.$data[attrVal] = ev.target.value; // 可以試著在這里執行:console.log(this.$data), // 就可以看到每次在輸入框輸入文字的時候,data中的msg值也發生了變化 })} } } observe(data) {} }2.2.4 數據影響視圖

至此，我們已經實現了：當我們在input框中輸入字符的時候，data中的數據會自動發生更新；

本小節的主要任務是：當data中的數據發生更新的時候，綁定了該數據的元素會在頁面上自動更新視圖。具體思路如下：

1) 我們將要實現一個 Wathcer 類，它有一個update方法，用來更新頁面。觀察者的代碼如下：

class Watcher{ constructor(node, updatedAttr, vm, expression){ // 將傳進來的值保存起來，這些數據都是渲染頁面時要用到的數據 this.node = node; this.updatedAttr = updatedAttr; this.vm = vm; this.expression = expression; this.update(); } update(){ this.node[this.updatedAttr] = this.vm.$data[this.expression]; } }

2) 試想，我們該給哪些數據添加觀察者？何時給數據添加觀察者？

在解析元素的時候，當解析到v-text和v-model指令的時候，說明這個元素是需要和數據雙向綁定的，因此我們在這時往容器中添加觀察者。我們需用到這樣一個數據結構：{屬性1: [wathcer1, wathcer2...], 屬性2: [...]}，如果不是很清晰，可以看下圖：

可以看到：vue實例中有一個$wathcer對象，$wathcer的每個屬性對應每個需要綁定的數據，值是一個數組，用來存放觀察了該數據的觀察者。（備注：Vue源碼中專門創造了Dep這么一個類，對應這里所說的數組，本文屬于簡易版本，就不過多介紹了）

3) 劫持數據：利用對象的訪問器屬性getter和setter做到當數據更新的時候，觸發一個動作，這個動作的主要目的就是讓所有觀察了該數據的觀察者執行update方法。

總結一下，在本小節我們需要做的工作：

實現一個Wathcer類； 在解析指令的時候（即在compile方法中）添加觀察者； 實現數據劫持（實現observe方法）。

完整代碼如下：

class Vue { // 接收傳進來的對象 constructor(options) { // 獲取有用信息 this.$el = document.querySelector(options.el); this.$data = options.data; // 容器: {屬性1: [wathcer1, wathcer2...], 屬性2: [...]} this.$watcher = {}; // 解析元素: 實現Compile this.compile(this.$el); // 要解析元素, 就得把元素傳進去 // 劫持數據: 實現 Observer this.observe(this.$data); // 要劫持數據, 就得把數據傳入 } compile(el) { // 解析元素下的每一個子節點, 所以要獲取el.children // 拓展: children 返回元素集合, childNodes返回節點集合 let nodes = el.children; // 解析每個子節點的指令 for (var i = 0, length = nodes.length; i < length; i++) {let node = nodes[i];// 如果當前節點還有子元素, 遞歸解析該節點if (node.children) { this.compile(node);}if (node.hasAttribute('v-text')) { let attrVal = node.getAttribute('v-text'); // node.textContent = this.$data[attrVal]; // Watcher在實例化時調用update, 替代了這行代碼 /** * 試想Wathcer要更新節點數據的時候要用到哪些數據? * e.g. p.innerHTML = vm.$data[msg] * 所以要傳入的參數依次是: 當前節點node, 需要更新的節點屬性, vue實例, 綁定的數據屬性 */ // 往容器中添加觀察者: {msg1: [Watcher, Watcher...], msg2: [...]} if (!this.$watcher[attrVal]) { this.$watcher[attrVal] = []; } this.$watcher[attrVal].push(new Watcher(node, 'innerHTML', this, attrVal))}if (node.hasAttribute('v-model')) { let attrVal = node.getAttribute('v-model'); node.value = this.$data[attrVal]; node.addEventListener('input', (ev) => { this.$data[attrVal] = ev.target.value; }) if (!this.$watcher[attrVal]) { this.$watcher[attrVal] = []; } // 不同于上處用的innerHTML, 這里input用的是vaule屬性 this.$watcher[attrVal].push(new Watcher(node, 'value', this, attrVal))} } } observe(data) { Object.keys(data).forEach((key) => {let val = data[key]; // 這個val將一直保存在內存中,每次訪問data[key],都是在訪問這個valObject.defineProperty(data, key, { get() { return val; // 這里不能直接返回data[key],不然會陷入無限死循環 }, set(newVal) { if (val !== newVal) { val = newVal;// 同理,這里不能直接對data[key]進行設置,會陷入死循環 this.$watcher[key].forEach((w) => {w.update(); }) } }}) }) } } class Watcher { constructor(node, updatedAttr, vm, expression) { // 將傳進來的值保存起來 this.node = node; this.updatedAttr = updatedAttr; this.vm = vm; this.expression = expression; this.update(); } update() { this.node[this.updatedAttr] = this.vm.$data[this.expression]; } } let vm = new Vue({ el: '#app', data: { msg: 'hello world', msg2: 'hello xiaofei' } })

至此，代碼就完成了。

3. 未來的計劃

用設計模式的知識，分析上面這份源碼存在的問題，并和Vue源碼進行比對，算是對Vue源碼的解析

以上就是vue 數據雙向綁定的實現方法的詳細內容，更多關于vue 數據雙向綁定的資料請關注好吧啦網其它相關文章！