vue雙向繫結原理分析

當我們學習angular或者vue的時候，其雙向繫結為我們開發帶來了諸多便捷，今天我們就來分析一下vue雙向繫結的原理。

1.vue雙向繫結原理

vue.js 則是採用資料劫持結合發布者-訂閱者模式的方式，通過object.defineproperty()來劫持各個屬性的setter，getter，在資料變動時發布訊息給訂閱者，觸發相應的監聽**。我們先來看object.defineproperty()這個方法：

var obj  = {};
object.defineproperty(obj, 'name', ,
set: function (newval) 
})obj.name = 'fei';//在給obj設定name屬性的時候，觸發了set這個方法
var val = obj.name;//在得到obj的name屬性，會觸發get方法

已經了解到vue是通過資料劫持的方式來做資料繫結的，其中最核心的方法便是通過object.defineproperty()來實現對屬性的劫持，那麼在設定或者獲取的時候我們就可以在get或者set方法裡假如其他的觸發函式，達到監聽資料變動的目的，無疑這個方法是本文中最重要、最基礎的內容之一。

2.實現最簡單的雙向繫結

我們知道通過object.defineproperty()可以實現資料劫持，是的屬性在賦值的時候觸發set方法，

當然要是這麼粗暴，肯定不行，效能會出很多的問題。

3.講解vue如何實現

先看原理圖

3.1 observer用來實現對每個vue中的data中定義的屬性迴圈用object.defineproperty()實現資料劫持，以便利用其中的setter和getter，然後通知訂閱者，訂閱者會觸發它的update方法，對檢視進行更新。

3.2 我們介紹為什麼要訂閱者，在vue中v-model，v-name，}等都可以對資料進行顯示，也就是說假如乙個屬性都通過這三個指令了，那麼每當這個屬性改變的時候，相應的這個三個指令的html檢視也必須改變，於是vue中就是每當有這樣的可能用到雙向繫結的指令，就在乙個dep中增加乙個訂閱者，其訂閱者只是更新自己的指令對應的資料，也就是v-model='name'和}有兩個對應的訂閱者，各自管理自己的地方。每當屬性的set方法觸發，就迴圈更新dep中的訂閱者。

4.vue**實現

4.1 observer實現，主要是給每個vue的屬性用object.defineproperty()，**如下：

function definereactive (obj, key, val) 
return val;
},set: function (newval) 
})}        function observe(obj, vm) )
}

4.2實現compile：

compile的目的就是解析各種指令稱真正的html。

function compile(node, vm) 
}compile.prototype = 
return frag;
},compileelement: function(node, vm) \}/;
//節點型別為元素(input元素這裡)
if(node.nodetype === 1) );
new watcher(vm, node, name, 'value');//建立新的watcher，會觸發函式向對應屬性的dep陣列中新增訂閱者，}};
}//節點型別為text
if(node.nodetype === 3) }}
}

4.3 watcher實現

function watcher(vm, node, name, type) 
watcher.prototype = ,
// 獲取data的屬性值
get: function() 
}

4.4 實現dep來為每個屬性新增訂閱者

function dep() 
dep.prototype = ,
notify: function() )}}

這樣一來整個資料的雙向繫結就完成了。

5.梳理

首先我們為每個vue屬性用object.defineproperty()實現資料劫持，為每個屬性分配乙個訂閱者集合的管理陣列dep；然後在編譯的時候在該屬性的陣列dep中新增訂閱者，v-model會新增乙個訂閱者，}也會，v-bind也會，只要用到該屬性的指令理論上都會，接著為input會新增監聽事件，修改值就會為該屬性賦值，觸發該屬性的set方法，在set方法內通知訂閱者陣列dep，訂閱者陣列迴圈呼叫各訂閱者的update方法更新檢視。

vue雙向繫結原理分析

vue雙向繫結原理分析

Vue雙向資料繫結原理分析

Vue 雙向資料繫結原理分析

vue雙向繫結原理分析

vue雙向繫結原理分析

Vue雙向資料繫結原理分析

Vue 雙向資料繫結原理分析

相關推薦