使用vue也有一段時間了，對vue的雙向綁定原理也有一點了解，看過視頻，看過資料，那么自己解釋出來還是有困難的，所以就自己查資料的同時整理出來。
vue數據的雙向綁定原理
vue數據雙向綁定是通過數據劫持結合發(fā)布者-訂閱者模式的方式來實現的，那么vue是如何進行數據劫持的呢？
結果：
我們可以看到屬性a有兩個相對應的get和set方法，為什么會多出這兩個方法呢？
因為vue是通過Object.defineProperty()來實現數據劫持的。
Object.defineProperty()是用來做什么的？它可以用來控制的一個對象的屬性的一些特有操作，如讀寫權，是否可以枚舉，這里我們主要先來研究下它對應的兩個描述屬性get和set。
在平常，我們很容易就可以打印出一個對象的屬性數據：
如果想要在執(zhí)行console.log(book.name)的同時，直接給書名加個書名號，那要怎么處理呢？或者說要通過什么監(jiān)聽對象 Book 的屬性值。這時候Object.defineProperty( )就派上用場了，代碼如下：
我們通過Object.defineProperty( )設置了對象Book的name屬性，對其get和set進行重寫操作，顧名思義，get就是在讀取name屬性這個值觸發(fā)的函數，set就是在設置name屬性這個值觸發(fā)的函數，所以當執(zhí)行?Book.name = 'vue雙向綁定原理' 這個語句時，控制臺會打印出 "你有一個名字叫vue雙向綁定原理"，緊接著，當讀取這個屬性時，就會輸出 "《vue雙向綁定原理》"，因為我們在get函數里面對該值做了加工了。如果這個時候我們執(zhí)行下下面的語句，控制臺會輸出什么？
console.log(Book);
乍一看，是不是跟我們在上面打印vue數據長得有點類似，說明vue確實是通過這種方法來進行數據劫持的。接下來我們通過其原理來實現一個簡單版的mvvm雙向綁定代碼。
思路分析
實現mvvm主要包含兩個方面，數據變化更新視圖，視圖變化更新數據：
關鍵點在于data如何更新view，因為view更新data其實可以通過事件監(jiān)聽即可，比如input標簽監(jiān)聽 'input' 事件就可以實現了。所以我們著重來分析下，當數據改變，如何更新視圖的。
數據更新視圖的重點是如何知道數據變了，只要知道數據變了，那么接下去的事都好處理。如何知道數據變了，其實上文我們已經給出答案了，就是通過Object.defineProperty( )對屬性設置一個set函數，當數據改變了就會來觸發(fā)這個函數，所以我們只要將一些需要更新的方法放在這里面就可以實現data更新view了。
思路有了，接下去就是實現過程了。
實現過程
我們已經知道實現數據的雙向綁定，首先要對數據進行劫持監(jiān)聽，所以我們需要設置一個監(jiān)聽器Observer，用來監(jiān)聽所有屬性。如果屬性發(fā)上變化了，就需要告訴訂閱者Watcher看是否需要更新。因為訂閱者是有很多個，所以我們需要有一個消息訂閱器Dep來專門收集這些訂閱者，然后在監(jiān)聽器Observer和訂閱者Watcher之間進行統一管理的。接著，我們還需要有一個指令解析器Compile，對每個節(jié)點元素進行掃描和解析，將相關指令對應初始化成一個訂閱者Watcher，并替換模板數據或者綁定相應的函數，此時當訂閱者Watcher接收到相應屬性的變化，就會執(zhí)行對應的更新函數，從而更新視圖。因此接下去我們執(zhí)行以下3個步驟，實現數據的雙向綁定：
1.實現一個監(jiān)聽器Observer，用來劫持并監(jiān)聽所有屬性，如果有變動的，就通知訂閱者。
2.實現一個訂閱者Watcher，可以收到屬性的變化通知并執(zhí)行相應的函數，從而更新視圖。
3.實現一個解析器Compile，可以掃描和解析每個節(jié)點的相關指令，并根據初始化模板數據以及初始化相應的訂閱器。
流程圖如下：
1.實現一個Observer
Observer是一個數據監(jiān)聽器，其實現核心方法就是前文所說的Object.defineProperty( )。如果要對所有屬性都進行監(jiān)聽的話，那么可以通過遞歸方法遍歷所有屬性值，并對其進行Object.defineProperty( )處理。如下代碼，實現了一個Observer。
思路分析中，需要創(chuàng)建一個可以容納訂閱者的消息訂閱器Dep，訂閱器Dep主要負責收集訂閱者，然后再屬性變化的時候執(zhí)行對應訂閱者的更新函數。所以顯然訂閱器需要有一個容器，這個容器就是list，將上面的Observer稍微改造下，植入消息訂閱器：
從代碼上看，我們將訂閱器Dep添加一個訂閱者設計在getter里面，這是為了讓Watcher初始化進行觸發(fā)，因此需要判斷是否要添加訂閱者，至于具體設計方案，下文會詳細說明的。在setter函數里面，如果數據變化，就會去通知所有訂閱者，訂閱者們就會去執(zhí)行對應的更新的函數。到此為止，一個比較完整Observer已經實現了，接下來我們開始設計Watcher。
2.實現Watcher
訂閱者Watcher在初始化的時候需要將自己添加進訂閱器Dep中，那該如何添加呢？我們已經知道監(jiān)聽器Observer是在get函數執(zhí)行了添加訂閱者Wather的操作的，所以我們只要在訂閱者Watcher初始化的時候觸發(fā)對應的get函數去執(zhí)行添加訂閱者操作即可，那要如何觸發(fā)get的函數，再簡單不過了，只要獲取對應的屬性值就可以觸發(fā)了，核心原因就是因為我們使用了Object.defineProperty( )進行數據監(jiān)聽。這里還有一個細節(jié)點需要處理，我們只要在訂閱者Watcher初始化的時候才需要添加訂閱者，所以需要做一個判斷操作，因此可以在訂閱器上做一下手腳：在Dep.target上緩存下訂閱者，添加成功后再將其去掉就可以了。訂閱者Watcher的實現如下：
這時候，我們需要對監(jiān)聽器Observer也做個稍微調整，主要是對應Watcher類原型上的get函數。需要調整地方在于defineReactive函數：
到此為止，簡單版的Watcher設計完畢，這時候我們只要將Observer和Watcher關聯起來，就可以實現一個簡單的雙向綁定數據了。因為這里沒有還沒有設計解析器Compile，所以對于模板數據我們都進行寫死處理，假設模板上又一個節(jié)點，且id號為'name'，并且雙向綁定的綁定的變量也為'name'，且是通過兩個大雙括號包起來（這里只是為了演示，暫時沒什么用處），模板如下：
這時候我們需要將Observer和Watcher關聯起來：
然后在頁面上new以下SelfVue類，就可以實現數據的雙向綁定了：
這時候打開頁面，可以看到頁面剛開始顯示了是'hello world'，過了2s后就變成'canfoo'了。到這里，總算大功告成一半了，但是還有一個細節(jié)問題，我們在賦值的時候是這樣的形式 ' ?selfVue.data.name = 'canfoo' ?' 而我們理想的形式是' ?selfVue.name = 'canfoo' ?'為了實現這樣的形式，我們需要在new SelfVue的時候做一個代理處理，讓訪問selfVue的屬性代理為訪問selfVue.data的屬性，實現原理還是使用Object.defineProperty( )對屬性值再包一層：
這下我們就可以直接通過' ?selfVue.name = 'canfoo' ?'的形式來進行改變模板數據了。
3.實現Compile
雖然上面已經實現了一個雙向數據綁定的例子，但是整個過程都沒有去解析dom節(jié)點，而是直接固定某個節(jié)點進行替換數據的，所以接下來需要實現一個解析器Compile來做解析和綁定工作。解析器Compile實現步驟：
1.解析模板指令，并替換模板數據，初始化視圖
2.將模板指令對應的節(jié)點綁定對應的更新函數，初始化相應的訂閱器
為了解析模板，首先需要獲取到dom元素，然后對含有dom元素上含有指令的節(jié)點進行處理，因此這個環(huán)節(jié)需要對dom操作比較頻繁，所有可以先建一個fragment片段，將需要解析的dom節(jié)點存入fragment片段里再進行處理：
function nodeToFragment (el) {
? ? var fragment = document.createDocumentFragment();
? ? var child = el.firstChild;
? ? while (child) {
? ? ? ? // 將Dom元素移入fragment中
? ? ? ? fragment.appendChild(child);
? ? ? ? child = el.firstChild
? ? }
? ? return fragment;
}
接下來需要遍歷各個節(jié)點，對含有相關指定的節(jié)點進行特殊處理，這里咱們先處理最簡單的情況，只對帶有 '{{變量}}' 這種形式的指令進行處理，先簡道難嘛，后面再考慮更多指令情況：
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);? // 繼續(xù)遞歸遍歷子節(jié)點
? ? ? ? }
? ? });
},
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;
}
獲取到最外層節(jié)點后，調用compileElement函數，對所有子節(jié)點進行判斷，如果節(jié)點是文本節(jié)點且匹配{{}}這種形式指令的節(jié)點就開始進行編譯處理，編譯處理首先需要初始化視圖數據，對應上面所說的步驟1，接下去需要生成一個并綁定更新函數的訂閱器，對應上面所說的步驟2。這樣就完成指令的解析、初始化、編譯三個過程，一個解析器Compile也就可以正常的工作了。為了將解析器Compile與監(jiān)聽器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 = 'canfoo';
? ? }, 2500);
</script>
如上代碼，在頁面上可觀察到，剛開始titile和name分別被初始化為 'hello world' 和空，2s后title被替換成 '你好' 3s后name被替換成 'canfoo' 了。廢話不多說
到這里，一個數據雙向綁定功能已經基本完成了，接下去就是需要完善更多指令的解析編譯，在哪里進行更多指令的處理呢？答案很明顯，只要在上文說的compileElement函數加上對其他指令節(jié)點進行判斷，然后遍歷其所有屬性，看是否有匹配的指令的屬性，如果有的話，就對其進行解析編譯。這里我們再添加一個v-model指令和事件指令的解析編譯，對于這些節(jié)點我們使用函數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原型上的，它首先遍歷所有節(jié)點屬性，然后再判斷屬性是否是指令屬性，如果是的話再區(qū)分是哪種指令，再進行相應的處理，處理方法相對來說比較簡單，這里就不再列出來，最后我們在稍微改造下類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); // 所有事情處理好后執(zhí)行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: 'canfoo'
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? clickMe: function () {
? ? ? ? ? ? ? ? this.title = 'hello world';
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? mounted: function () {
? ? ? ? ? ? window.setTimeout(() => {
? ? ? ? ? ? ? ? this.title = '你好';
? ? ? ? ? ? }, 1000);
? ? ? ? }
? ? });
</script>
是不是看起來跟vue的使用方法一樣，哈，真正的大功告成！
