使用vue也好有一段時(shí)間了，雖然對其雙向綁定原理也有了解個(gè)大概，但也沒好好探究下其原理實(shí)現(xiàn)，所以這次特意花了幾晚時(shí)間查閱資料和閱讀相關(guān)源碼，自己也實(shí)現(xiàn)一個(gè)簡單版vue的雙向綁定版本，先上個(gè)成果圖來吸引各位：
創(chuàng)新互聯(lián)"三網(wǎng)合一"的企業(yè)建站思路。企業(yè)可建設(shè)擁有電腦版、微信版、手機(jī)版的企業(yè)網(wǎng)站。實(shí)現(xiàn)跨屏營銷，產(chǎn)品發(fā)布一步更新，電腦網(wǎng)絡(luò)+移動(dòng)網(wǎng)絡(luò)一網(wǎng)打盡，滿足企業(yè)的營銷需求！創(chuàng)新互聯(lián)具備承接各種類型的成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)項(xiàng)目的能力。經(jīng)過10多年的努力的開拓，為不同行業(yè)的企事業(yè)單位提供了優(yōu)質(zhì)的服務(wù)，并獲得了客戶的一致好評。
代碼： 效果圖：
是不是看起來跟vue的使用方式差不多？接下來就來從原理到實(shí)現(xiàn)，從簡到難一步一步來實(shí)現(xiàn)這個(gè)SelfVue。由于本文只是為了學(xué)習(xí)和分享，所以只是簡單實(shí)現(xiàn)下原理，并沒有考慮太多情況和設(shè)計(jì)，如果大家有什么建議，歡迎提出來。
本文主要介紹兩大內(nèi)容：
1. vue數(shù)據(jù)雙向綁定的原理。
2. 實(shí)現(xiàn)簡單版vue的過程，主要實(shí)現(xiàn){{}}、v-model和事件指令的功能。
相關(guān)代碼地址：https://github.com/canfoo/self-vue
vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來實(shí)現(xiàn)的，那么vue是如果進(jìn)行數(shù)據(jù)劫持的，我們可以先來看一下通過控制臺(tái)輸出一個(gè)定義在vue初始化數(shù)據(jù)上的對象是個(gè)什么東西。
代碼：
重慶分公司
重慶分公司
var vm = new Vue({
data: {
obj: {
a: 1
}
},
created: function () {
console.log(this.obj);
}
});
結(jié)果：
我們可以看到屬性a有兩個(gè)相對應(yīng)的get和set方法，為什么會(huì)多出這兩個(gè)方法呢？因?yàn)関ue是通過Object.defineProperty()來實(shí)現(xiàn)數(shù)據(jù)劫持的。
Object.defineProperty( )是用來做什么的？它可以來控制一個(gè)對象屬性的一些特有操作，比如讀寫權(quán)、是否可以枚舉，這里我們主要先來研究下它對應(yīng)的兩個(gè)描述屬性get和set，如果還不熟悉其用法，請點(diǎn)擊這里閱讀更多用法。
在平常，我們很容易就可以打印出一個(gè)對象的屬性數(shù)據(jù)：
var Book = {
name: 'vue權(quán)威指南'};
console.log(Book.name); // vue權(quán)威指南如果想要在執(zhí)行console.log(book.name)的同時(shí)，直接給書名加個(gè)書名號，那要怎么處理呢？或者說要通過什么監(jiān)聽對象 Book 的屬性值。這時(shí)候Object.defineProperty( )就派上用場了，代碼如下：
var Book = {}var name = '';
Object.defineProperty(Book, 'name', {
set: function (value) {
name = value;
console.log('你取了一個(gè)書名叫做' + value);
},
get: function () { return '《' + name + '》'
}
})
Book.name = 'vue權(quán)威指南'; // 你取了一個(gè)書名叫做vue權(quán)威指南console.log(Book.name); // 《vue權(quán)威指南》
我們通過Object.defineProperty( )設(shè)置了對象Book的name屬性，對其get和set進(jìn)行重寫操作，顧名思義，get就是在讀取name屬性這個(gè)值觸發(fā)的函數(shù)，set就是在設(shè)置name屬性這個(gè)值觸發(fā)的函數(shù)，所以當(dāng)執(zhí)行 Book.name = 'vue權(quán)威指南' 這個(gè)語句時(shí)，控制臺(tái)會(huì)打印出 "你取了一個(gè)書名叫做vue權(quán)威指南"，緊接著，當(dāng)讀取這個(gè)屬性時(shí)，就會(huì)輸出 "《vue權(quán)威指南》"，因?yàn)槲覀冊趃et函數(shù)里面對該值做了加工了。如果這個(gè)時(shí)候我們執(zhí)行下下面的語句，控制臺(tái)會(huì)輸出什么？
console.log(Book);
結(jié)果：
乍一看，是不是跟我們在上面打印vue數(shù)據(jù)長得有點(diǎn)類似，說明vue確實(shí)是通過這種方法來進(jìn)行數(shù)據(jù)劫持的。接下來我們通過其原理來實(shí)現(xiàn)一個(gè)簡單版的mvvm雙向綁定代碼。
實(shí)現(xiàn)mvvm主要包含兩個(gè)方面，數(shù)據(jù)變化更新視圖，視圖變化更新數(shù)據(jù)：
關(guān)鍵點(diǎn)在于data如何更新view，因?yàn)関iew更新data其實(shí)可以通過事件監(jiān)聽即可，比如input標(biāo)簽監(jiān)聽 'input' 事件就可以實(shí)現(xiàn)了。所以我們著重來分析下，當(dāng)數(shù)據(jù)改變，如何更新視圖的。
數(shù)據(jù)更新視圖的重點(diǎn)是如何知道數(shù)據(jù)變了，只要知道數(shù)據(jù)變了，那么接下去的事都好處理。如何知道數(shù)據(jù)變了，其實(shí)上文我們已經(jīng)給出答案了，就是通過Object.defineProperty( )對屬性設(shè)置一個(gè)set函數(shù)，當(dāng)數(shù)據(jù)改變了就會(huì)來觸發(fā)這個(gè)函數(shù)，所以我們只要將一些需要更新的方法放在這里面就可以實(shí)現(xiàn)data更新view了。
思路有了，接下去就是實(shí)現(xiàn)過程了。
我們已經(jīng)知道實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，首先要對數(shù)據(jù)進(jìn)行劫持監(jiān)聽，所以我們需要設(shè)置一個(gè)監(jiān)聽器Observer，用來監(jiān)聽所有屬性。如果屬性發(fā)上變化了，就需要告訴訂閱者Watcher看是否需要更新。因?yàn)橛嗛喺呤怯泻芏鄠€(gè)，所以我們需要有一個(gè)消息訂閱器Dep來專門收集這些訂閱者，然后在監(jiān)聽器Observer和訂閱者Watcher之間進(jìn)行統(tǒng)一管理的。接著，我們還需要有一個(gè)指令解析器Compile，對每個(gè)節(jié)點(diǎn)元素進(jìn)行掃描和解析，將相關(guān)指令對應(yīng)初始化成一個(gè)訂閱者Watcher，并替換模板數(shù)據(jù)或者綁定相應(yīng)的函數(shù)，此時(shí)當(dāng)訂閱者Watcher接收到相應(yīng)屬性的變化，就會(huì)執(zhí)行對應(yīng)的更新函數(shù)，從而更新視圖。因此接下去我們執(zhí)行以下3個(gè)步驟，實(shí)現(xiàn)數(shù)據(jù)的雙向綁定：
1.實(shí)現(xiàn)一個(gè)監(jiān)聽器Observer，用來劫持并監(jiān)聽所有屬性，如果有變動(dòng)的，就通知訂閱者。
2.實(shí)現(xiàn)一個(gè)訂閱者Watcher，可以收到屬性的變化通知并執(zhí)行相應(yīng)的函數(shù)，從而更新視圖。
3.實(shí)現(xiàn)一個(gè)解析器Compile，可以掃描和解析每個(gè)節(jié)點(diǎn)的相關(guān)指令，并根據(jù)初始化模板數(shù)據(jù)以及初始化相應(yīng)的訂閱器。
流程圖如下：
Observer是一個(gè)數(shù)據(jù)監(jiān)聽器，其實(shí)現(xiàn)核心方法就是前文所說的Object.defineProperty( )。如果要對所有屬性都進(jìn)行監(jiān)聽的話，那么可以通過遞歸方法遍歷所有屬性值，并對其進(jìn)行Object.defineProperty( )處理。如下代碼，實(shí)現(xiàn)了一個(gè)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 + '已經(jīng)被監(jiān)聽了，現(xiàn)在值為：“' + 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權(quán)威指南'; // 屬性name已經(jīng)被監(jiān)聽了，現(xiàn)在值為：“vue權(quán)威指南”library.book2 = '沒有此書籍'; // 屬性book2已經(jīng)被監(jiān)聽了，現(xiàn)在值為：“沒有此書籍”
思路分析中，需要?jiǎng)?chuàng)建一個(gè)可以容納訂閱者的消息訂閱器Dep，訂閱器Dep主要負(fù)責(zé)收集訂閱者，然后再屬性變化的時(shí)候執(zhí)行對應(yīng)訂閱者的更新函數(shù)。所以顯然訂閱器需要有一個(gè)容器，這個(gè)容器就是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); // 在這里添加一個(gè)訂閱者 } return val;
},
set: function(newVal) { if (val === newVal) { return;
}
val = newVal;
console.log('屬性' + key + '已經(jīng)被監(jiān)聽了，現(xiàn)在值為：“' + newVal.toString() + '”');
dep.notify(); // 如果數(shù)據(jù)變化，通知所有訂閱者 }
});
}
function Dep () { this.subs = [];
}
Dep.prototype = {
addSub: function(sub) { this.subs.push(sub);
},
notify: function() { this.subs.forEach(function(sub) {
sub.update();
});
}
};
從代碼上看，我們將訂閱器Dep添加一個(gè)訂閱者設(shè)計(jì)在getter里面，這是為了讓W(xué)atcher初始化進(jìn)行觸發(fā)，因此需要判斷是否要添加訂閱者，至于具體設(shè)計(jì)方案，下文會(huì)詳細(xì)說明的。在setter函數(shù)里面，如果數(shù)據(jù)變化，就會(huì)去通知所有訂閱者，訂閱者們就會(huì)去執(zhí)行對應(yīng)的更新的函數(shù)。到此為止，一個(gè)比較完整Observer已經(jīng)實(shí)現(xiàn)了，接下來我們開始設(shè)計(jì)Watcher。
訂閱者Watcher在初始化的時(shí)候需要將自己添加進(jìn)訂閱器Dep中，那該如何添加呢？我們已經(jīng)知道監(jiān)聽器Observer是在get函數(shù)執(zhí)行了添加訂閱者Wather的操作的，所以我們只要在訂閱者Watcher初始化的時(shí)候出發(fā)對應(yīng)的get函數(shù)去執(zhí)行添加訂閱者操作即可，那要如何觸發(fā)get的函數(shù)，再簡單不過了，只要獲取對應(yīng)的屬性值就可以觸發(fā)了，核心原因就是因?yàn)槲覀兪褂昧薕bject.defineProperty( )進(jìn)行數(shù)據(jù)監(jiān)聽。這里還有一個(gè)細(xì)節(jié)點(diǎn)需要處理，我們只要在訂閱者Watcher初始化的時(shí)候才需要添加訂閱者，所以需要做一個(gè)判斷操作，因此可以在訂閱器上做一下手腳：在Dep.target上緩存下訂閱者，添加成功后再將其去掉就可以了。訂閱者Watcher的實(shí)現(xiàn)如下：
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] // 強(qiáng)制執(zhí)行監(jiān)聽器里的get函數(shù)
Dep.target = null; // 釋放自己
return value;
}
};
這時(shí)候，我們需要對監(jiān)聽器Observer也做個(gè)稍微調(diào)整，主要是對應(yīng)Watcher類原型上的get函數(shù)。需要調(diào)整地方在于defineReactive函數(shù)：
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); // 在這里添加一個(gè)訂閱者 } return val;
},
set: function(newVal) { if (val === newVal) { return;
}
val = newVal;
console.log('屬性' + key + '已經(jīng)被監(jiān)聽了，現(xiàn)在值為：“' + newVal.toString() + '”');
dep.notify(); // 如果數(shù)據(jù)變化，通知所有訂閱者 }
});
}
Dep.target = null;
到此為止，簡單版的Watcher設(shè)計(jì)完畢，這時(shí)候我們只要將Observer和Watcher關(guān)聯(lián)起來，就可以實(shí)現(xiàn)一個(gè)簡單的雙向綁定數(shù)據(jù)了。因?yàn)檫@里沒有還沒有設(shè)計(jì)解析器Compile，所以對于模板數(shù)據(jù)我們都進(jìn)行寫死處理，假設(shè)模板上又一個(gè)節(jié)點(diǎn)，且id號為'name'，并且雙向綁定的綁定的變量也為'name'，且是通過兩個(gè)大雙括號包起來（這里只是為了掩飾，暫時(shí)沒什么用處），模板如下：
