淺談VUE響應式雙向綁定
區別於公司產品的老項目前端部分大量運用Jquery框架，使用現代主流前端框架開發產品均使用數據驅動視圖的方式，隱藏瞭如JQ的DOM操做改變視圖的方式，即現代前端框架採用聲明式編程替代類如JQ的命令式編程javascript
$("#xxx").text("xxx");
// 變爲下者
view = render(state);複製代碼
後者則是咱們輸入了數據狀態，輸出視圖（咱們不關心中間的過程，它們均由框架幫助咱們實現，既使用了框架，不就是爲了讓咱們構建應用產品化繁就簡麼？）；
前者當然直接，可是當應用變得複雜則代碼將難以維護，然後者框架幫咱們實現了一系列的操做，無需管理過程，優點顯然可見。
VUE框架從總體上來說，最大的特色即在於數據驅動視圖的響應式、數據雙向綁定特色，這也是我入職面試時楠哥第一個問個人面試問題，當時時間緣由和理解不夠深刻緣由，對此理解不夠深刻，故在此談談VUE的響應式、數據雙向綁定原理。前端
在此針對兩個問題進行分析：vue
- vue數據雙向綁定的原理。
- 實現簡單版vue的過程，主要實現{{}}、v-model和事件指令的功能。
vue數據雙向綁定原理
vue數據雙向綁定是經過數據劫持結合發佈者-訂閱者模式的方式來實現的，咱們能夠先來看一下經過控制檯輸出一個定義在vue初始化數據上的對象是個什麼東西。
java
var vm = new Vue({
data: {
obj: {
a: 1
}
},
created: function () {
console.log(this.obj);
}
});複製代碼
咱們能夠看到屬性a有兩個相對應的get和set方法，爲何會多出這兩個方法呢？由於vue是經過Object.defineProperty()來實現數據劫持的。node
Object.defineProperty( )是用來作什麼的？它能夠來控制一個對象屬性的一些特有操做，好比讀寫權、是否能夠枚舉，這裏咱們主要先來研究下它對應的兩個描述屬性get和set，其用法，請點擊這裏閱讀更多用法。面試
在日常，咱們很容易就能夠打印出一個對象的屬性數據：
編程
var Book = {
name: 'vue權威指南'
};
console.log(Book.name); // vue權威指南複製代碼
若是想要在執行console.log(book.name)的同時，直接給書名加個書名號，那要怎麼處理呢？或者說要經過什麼監聽對象 Book 的屬性值。這時候Object.defineProperty( )就派上用場了，代碼以下：
數組
var Book = {}
var name = '';
Object.defineProperty(Book, 'name', {
set: function (value) {
name = value;
console.log('你取了一個書名叫作' + value);
},
get: function () {
return '《' + name + '》'
}
})
Book.name = 'vue權威指南'; // 你取了一個書名叫作vue權威指南
console.log(Book.name); // 《vue權威指南》複製代碼
咱們經過Object.defineProperty( )設置了對象Book的name屬性，對其get和set進行重寫操做，顧名思義，get就是在讀取name屬性這個值觸發的函數，set就是在設置name屬性這個值觸發的函數，因此當執行 Book.name = 'vue權威指南' 這個語句時，控制檯會打印出 "你取了一個書名叫作vue權威指南"，緊接着，當讀取這個屬性時，就會輸出 "《vue權威指南》"，由於咱們在get函數裏面對該值作了加工了。若是這個時候咱們執行下下面的語句，控制檯會輸出什麼？
緩存
console.log(Book);複製代碼
乍一看，是否是跟咱們在上面打印vue數據長得有點相似，說明vue確實是經過這種方法來進行數據劫持的。接下來咱們經過其原理來實現一個簡單版的mvvm雙向綁定代碼。
bash
思路分析
實現mvvm主要包含兩個方面，數據變化更新視圖，視圖變化更新數據：
關鍵點在於data如何更新view，由於view更新data其實能夠經過事件監聽便可，好比input標籤監聽 'input' 事件就能夠實現了。因此咱們着重來分析下，當數據改變，如何更新視圖的。
數據更新視圖的重點是如何知道數據變了，只要知道數據變了，那麼接下去的事都好處理。如何知道數據變了，其實上文咱們已經給出答案了，就是經過Object.defineProperty( )對屬性設置一個set函數，當數據改變了就會來觸發這個函數，因此咱們只要將一些須要更新的方法放在這裏面就能夠實現data更新view了。
思路有了，接下去就是實現過程了。
實現過程
咱們已經知道實現數據的雙向綁定，首先要對數據進行劫持監聽，因此咱們須要設置一個監聽器Observer，用來監聽全部屬性。若是屬性發生變化了，就須要告訴訂閱者Watcher看是否須要更新。由於訂閱者是有不少個，因此咱們須要有一個消息訂閱器Dep(depandence)來專門收集這些訂閱者，而後在監聽器Observer和訂閱者Watcher之間進行統一管理的。接着，咱們還須要有一個指令解析器Compile，對每一個節點元素進行掃描和解析，將相關指令對應初始化成一個訂閱者Watcher，並替換模板數據或者綁定相應的函數，此時當訂閱者Watcher接收到相應屬性的變化，就會執行對應的更新函數，從而更新視圖。所以接下去咱們執行如下3個步驟，實現數據的雙向綁定：
1.實現一個監聽器Observer，用來劫持並監聽全部屬性，若是有變更的，就通知訂閱者。
2.實現一個訂閱者Watcher，能夠收到屬性的變化通知並執行相應的函數，從而更新視圖。
3.實現一個解析器Compile，能夠掃描和解析每一個節點的相關指令，並根據初始化模板數據以及初始化相應的訂閱器。
流程圖以下：
1.實現一個Observer
Observer是一個數據監聽器，其實現核心方法就是前文所說的Object.defineProperty( )。若是要對全部屬性都進行監聽的話，那麼能夠經過遞歸方法遍歷全部屬性值，並對其進行Object.defineProperty( )處理。以下代碼，實現了一個Observer。
function defineReactive(data, key, val) {
observe(val); // 遞歸遍歷全部子屬性
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function() {
return val;
},
set: function(newVal) {
val = newVal;
console.log('屬性' + key + '已經被監聽了，如今值爲：「' + newVal.toString() + '」');
}
});
}
function observe(data) {
if (!data || typeof data !== 'object') {
return;
}
Object.keys(data).forEach(function(key) {
defineReactive(data, key, data[key]);
});
};
var library = {
book1: {
name: ''
},
book2: ''
};
observe(library);
library.book1.name = 'vue權威指南'; // 屬性name已經被監聽了，如今值爲：「vue權威指南」
library.book2 = '沒有此書籍'; // 屬性book2已經被監聽了，如今值爲：「沒有此書籍」複製代碼
思路分析中，須要建立一個能夠容納訂閱者的消息訂閱器Dep，訂閱器Dep主要負責收集訂閱者，而後再屬性變化的時候執行對應訂閱者的更新函數。因此顯然訂閱器須要有一個容器，這個容器就是list，將上面的Observer稍微改造下，植入消息訂閱器：
function defineReactive(data, key, val) {
observe(val); // 遞歸遍歷全部子屬性
var dep = new Dep();
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function() {
if (是否須要添加訂閱者) {
dep.addSub(watcher); // 在這裏添加一個訂閱者
}
return val;
},
set: function(newVal) {
if (val === newVal) {
return;
}
val = newVal;
console.log('屬性' + key + '已經被監聽了，如今值爲：「' + newVal.toString() + '」');
dep.notify(); // 若是數據變化，通知全部訂閱者
}
});
}
function Dep () {
this.subs = [];
}
Dep.prototype = {
addSub: function(sub) {
this.subs.push(sub);
},
notify: function() {
this.subs.forEach(function(sub) {
sub.update();
});
}
};複製代碼
從代碼上看，咱們將訂閱器Dep添加一個訂閱者設計在getter裏面，這是爲了讓Watcher初始化進行觸發，所以須要判斷是否要添加訂閱者，至於具體設計方案，下文會詳細說明的。在setter函數裏面，若是數據變化，就會去通知全部訂閱者，訂閱者們就會去執行對應的更新的函數。到此爲止，一個比較完整Observer已經實現了，接下來咱們開始設計Watcher。
2.實現Watcher
訂閱者Watcher在初始化的時候須要將本身添加進訂閱器Dep中，那該如何添加呢？咱們已經知道監聽器Observer是在get函數執行了添加訂閱者Wather的操做的，因此咱們只要在訂閱者Watcher初始化的時候觸發對應的get函數去執行添加訂閱者操做便可，那要如何觸發get的函數，只要獲取對應的屬性值就能夠觸發了，核心緣由就是由於咱們使用了Object.defineProperty( )進行數據監聽。這裏還有一個細節點須要處理，咱們只要在訂閱者Watcher初始化的時候才須要添加訂閱者，因此須要作一個判斷操做，所以能夠在訂閱器上作一下手腳：在Dep.target上緩存下訂閱者，添加成功後再將其去掉就能夠了。訂閱者Watcher的實現以下：
function Watcher(vm, exp, cb) {
this.cb = cb;
this.vm = vm;
this.exp = exp;
this.value = this.get(); // 將本身添加到訂閱器的操做
}
Watcher.prototype = {
update: function() {
this.run();
},
run: function() {
var value = this.vm.data[this.exp];
var oldVal = this.value;
if (value !== oldVal) {
this.value = value;
this.cb.call(this.vm, value, oldVal);
}
},
get: function() {
Dep.target = this; // 緩存本身
var value = this.vm.data[this.exp] // 強制執行監聽器裏的get函數
Dep.target = null; // 釋放本身
return value;
}
};複製代碼
這時候，咱們須要對監聽器Observer也作個稍微調整，主要是對應Watcher類原型上的get函數。須要調整地方在於defineReactive函數：
function defineReactive(data, key, val) {
observe(val); // 遞歸遍歷全部子屬性
var dep = new Dep();
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function() {
if (Dep.target) {. // 判斷是否須要添加訂閱者
dep.addSub(Dep.target); // 在這裏添加一個訂閱者
}
return val;
},
set: function(newVal) {
if (val === newVal) {
return;
}
val = newVal;
console.log('屬性' + key + '已經被監聽了，如今值爲：「' + newVal.toString() + '」');
dep.notify(); // 若是數據變化，通知全部訂閱者
}
});
}
Dep.target = null;複製代碼
到此爲止，簡單版的Watcher設計完畢，這時候咱們只要將Observer和Watcher關聯起來，就能夠實現一個簡單的雙向綁定數據了。由於這裏尚未設計解析器Compile，因此對於模板數據咱們都進行寫死處理，假設模板上有一個節點，且id爲'name'，而且雙向綁定的綁定的變量也爲'name'，且是經過兩個大雙括號包起來（這裏只是爲了演示，暫時沒什麼用處），模板以下：
<body>
<h1 id="name">{{name}}</h1>
</body>複製代碼
這時候咱們須要將Observer和Watcher關聯起來：
function SelfVue (data, el, exp) {
this.data = data;
observe(data);
el.innerHTML = this.data[exp]; // 初始化模板數據的值
new Watcher(this, exp, function (value) {
el.innerHTML = value;
});
return this;
}複製代碼
而後在頁面上new一下SelfVue，就能夠實現數據的雙向綁定了：
<body>
<h1 id="name">{{name}}</h1>
</body>
<script src="js/observer.js"></script>
<script src="js/watcher.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript">
var ele = document.querySelector('#name');
var selfVue = new SelfVue({
name: 'hello world'
}, ele, 'name');
window.setTimeout(function () {
console.log('name值改變了');
selfVue.data.name = 'ZYB';
}, 2000);
</script>複製代碼
這時候打開頁面，能夠看到頁面剛開始顯示了是'hello world'，過了2s後就變成'ZYB'了。到這裏，還有一個細節問題，咱們在賦值的時候是這樣的形式 ' selfVue.data.name = 'ZYB' ' 而咱們理想的形式是' selfVue.name = 'ZYB'爲了實現這樣的形式，咱們須要在new SelfVue的時候作一個代理處理，讓訪問selfVue的屬性代理爲訪問selfVue.data的屬性，實現原理仍是使用Object.defineProperty( )對屬性值再包一層：
function SelfVue (data, el, exp) {
var self = this;
this.data = data;
Object.keys(data).forEach(function(key) {
self.proxyKeys(key); // 綁定代理屬性
});
observe(data);
el.innerHTML = this.data[exp]; // 初始化模板數據的值
new Watcher(this, exp, function (value) {
el.innerHTML = value;
});
return this;
}
SelfVue.prototype = {
proxyKeys: function (key) {
var self = this;
Object.defineProperty(this, key, {
enumerable: false,
configurable: true,
get: function proxyGetter() {
return self.data[key];
},
set: function proxySetter(newVal) {
self.data[key] = newVal;
}
});
}
}複製代碼
這下咱們就能夠直接經過' selfVue.name = 'ZYB' '的形式來進行改變模板數據了。
3.實現Compile
雖然上面已經實現了一個雙向數據綁定的例子，可是整個過程都沒有去解析dom節點，而是直接固定某個節點進行替換數據的，因此接下來須要實現一個解析器Compile來作解析和綁定工做。解析器Compile實現步驟：
1.解析模板指令，並替換模板數據，初始化視圖
2.將模板指令對應的節點綁定對應的更新函數，初始化相應的訂閱器
爲了解析模板，首先須要獲取到dom元素，而後對含有dom元素上含有指令的節點進行處理，所以這個環節須要對dom操做比較頻繁，因此能夠先建一個fragment片斷，將須要解析的dom節點存入fragment片斷裏再進行處理：
補充：
DocumentFragment（文檔片斷）能夠看做節點容器，它能夠包含多個子節點，當咱們將它插入到 DOM 中時，只有它的子節點會插入目標節點，因此把它看做一組節點的容器。使用 DocumentFragment 處理節點，速度和性能遠遠優於直接操做 DOM。Vue 進行編譯時，就是將掛載目標的全部子節點劫持（真的是劫持，經過 append 方法，DOM 中的節點會被自動刪除）到 DocumentFragment 中，通過一番處理後，再將 DocumentFragment 總體返回插入掛載目標。
function nodeToFragment (el) {
var fragment = document.createDocumentFragment();
var child = el.firstChild;
while (child) {
// 將Dom元素移入fragment中
fragment.appendChild(child);
child = el.firstChild
}
return fragment;
}複製代碼
接下來須要遍歷各個節點，對含有相關指定的節點進行特殊處理，這裏先處理最簡單的狀況，只對帶有 '{{變量}}' 這種形式的指令進行處理，後面再考慮更多指令狀況：
function compileElement (el) {
var childNodes = el.childNodes;
var self = this;
[].slice.call(childNodes).forEach(function(node) {
var reg = /\{\{(.*)\}\}/;
var text = node.textContent;
if (self.isTextNode(node) && reg.test(text)) { // 判斷是不是符合這種形式{{}}的指令
self.compileText(node, reg.exec(text)[1]);
}
if (node.childNodes && node.childNodes.length) {
self.compileElement(node); // 繼續遞歸遍歷子節點
}
});
},
function compileText (node, exp) {
var self = this;
var initText = this.vm[exp];
updateText(node, initText); // 將初始化的數據初始化到視圖中
new Watcher(this.vm, exp, function (value) { // 生成訂閱器並綁定更新函數
self.updateText(node, value);
});
},
function updateText (node, value) {
node.textContent = typeof value == 'undefined' ? '' : value;
}複製代碼
獲取到最外層節點後，調用compileElement函數，對全部子節點進行判斷，若是節點是文本節點且匹配{{}}這種形式指令的節點就開始進行編譯處理，編譯處理首先須要初始化視圖數據，對應上面所說的步驟1，接下去須要生成一個並綁定更新函數的訂閱器，對應上面所說的步驟2。這樣就完成指令的解析、初始化、編譯三個過程，一個解析器Compile也就能夠正常的工做了。爲了將解析器Compile與監聽器Observer和訂閱者Watcher關聯起來，咱們須要再修改一下類SelfVue函數：
function SelfVue (options) {
var self = this;
this.vm = this;
this.data = options;
Object.keys(this.data).forEach(function(key) {
self.proxyKeys(key);
});
observe(this.data);
new Compile(options, this.vm);
return this;
}複製代碼
更改後，咱們就不要像以前經過傳入固定的元素值進行雙向綁定了，能夠隨便命名各類變量進行雙向綁定了：
<body>
<div id="app">
<h2>{{title}}</h2>
<h1>{{name}}</h1>
</div>
</body>
<script src="js/observer.js"></script>
<script src="js/watcher.js"></script>
<script src="js/compile.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript">
var selfVue = new SelfVue({
el: '#app',
data: {
title: 'hello world',
name: ''
}
});
window.setTimeout(function () {
selfVue.title = '你好';
}, 2000);
window.setTimeout(function () {
selfVue.name = 'ZYB';
}, 2500);
</script>複製代碼
如上代碼，在頁面上可觀察到，剛開始titile和name分別被初始化爲 'hello world' 和空，2s後title被替換成 '你好' 3s後name被替換成 'ZYB' 了。
到這裏，一個數據雙向綁定功能已經基本完成了，接下去就是須要完善更多指令的解析編譯，在哪裏進行更多指令的處理呢？答案很明顯，只要在上文說的compileElement函數加上對其餘指令節點進行判斷，而後遍歷其全部屬性，看是否有匹配的指令的屬性，若是有的話，就對其進行解析編譯。這裏咱們再添加一個v-model指令和事件指令的解析編譯，對於這些節點咱們使用函數compile進行解析處理：
function compile (node) {
var nodeAttrs = node.attributes;
var self = this;
Array.prototype.forEach.call(nodeAttrs, function(attr) {
var attrName = attr.name;
if (self.isDirective(attrName)) {
var exp = attr.value;
var dir = attrName.substring(2);
if (self.isEventDirective(dir)) { // 事件指令
self.compileEvent(node, self.vm, exp, dir);
} else { // v-model 指令
self.compileModel(node, self.vm, exp, dir);
}
node.removeAttribute(attrName);
}
});
}複製代碼
上面的compile函數是掛載Compile原型上的，它首先遍歷全部節點屬性，而後再判斷屬性是不是指令屬性，若是是的話再區分是哪一種指令，再進行相應的處理。
最後咱們在稍微改造下類SelfVue，使它更像vue的用法：
function SelfVue (options) {
var self = this;
this.data = options.data;
this.methods = options.methods;
Object.keys(this.data).forEach(function(key) {
self.proxyKeys(key);
});
observe(this.data);
new Compile(options.el, this);
options.mounted.call(this); // 全部事情處理好後執行mounted函數
}複製代碼
這時候咱們能夠來真正測試了，在頁面上設置以下東西：
<body>
<div id="app">
<h2>{{title}}</h2>
<input v-model="name">
<h1>{{name}}</h1>
<button v-on:click="clickMe">click me!</button>
</div>
</body>
<script src="js/observer.js"></script>
<script src="js/watcher.js"></script>
<script src="js/compile.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript">
new SelfVue({
el: '#app',
data: {
title: 'hello world',
name: 'ZYB'
},
methods: {
clickMe: function () {
this.title = 'hello world';
}
},
mounted: function () {
window.setTimeout(() => {
this.title = '你好';
}, 1000);
}
});
</script>複製代碼
VUE3.0即將發佈，在VUE3.0中，VUE的雙向綁定換爲了ES6中的proxy,由於對於object.defineproperty()：
- Object.defineProperty沒法監控到數組下標的變化，致使直接經過數組的下標給數組設置值，不能實時響應。
- Object.defineProperty只能劫持對象的屬性,所以咱們須要對每一個對象的每一個屬性進行遍歷。Vue 2.x裏，是經過 遞歸 + 遍歷 data 對象來實現對數據的監控的，若是屬性值也是對象那麼須要深度遍歷,顯然若是能劫持一個完整的對象是纔是更好的選擇。
而要取代它的Proxy有如下兩個優勢;
- 能夠劫持整個對象，並返回一個新對象
- 有13種劫持操做
此處暫不展開贅述，待到VUE3.0正式發佈再作研究。
- 1. 淺談vue雙向綁定原理
- 2. 淺談Vue之雙向綁定
- 3. Vue學習筆記二（雙向綁定、循環、響應式）
- 4. Vue 之響應式原理（雙向綁定）
- 5. Vue 響應式原理 & 如何實現MVVM雙向綁定
- 6. Vue中的響應式數據/數據雙向綁定原理
- 7. 淺談vue.js的雙向綁定
- 8. Vue雙向綁定
- 9. vue雙向綁定
- 10. vue 雙向綁定
- 更多相關文章...
- • WSDL 綁定 - WSDL 教程
- • ASP.NET Web Forms - 數據綁定 - ASP.NET 教程
- • 算法總結-雙指針
- • 漫談MySQL的鎖機制
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 淺談vue雙向綁定原理
- 2. 淺談Vue之雙向綁定
- 3. Vue學習筆記二（雙向綁定、循環、響應式）
- 4. Vue 之響應式原理（雙向綁定）
- 5. Vue 響應式原理 & 如何實現MVVM雙向綁定
- 6. Vue中的響應式數據/數據雙向綁定原理
- 7. 淺談vue.js的雙向綁定
- 8. Vue雙向綁定
- 9. vue雙向綁定
- 10. vue 雙向綁定