參考文獻：https://www.cnblogs.com/libin-1/p/6893712.html

https://juejin.im/post/5b2f0769e51d45589f46949e

?

MVVM拆開來即為Model-View-ViewModel，有View，ViewModel，Model三部分組成。View層代表的是視圖、模版，負責將數據模型轉化為UI展現出來。Model層代表的是模型、數據，可以在Model層中定義數據修改和操作的業務邏輯。ViewModel層連接Model和View。

在MVVM的架構下，View層和Model層并沒有直接聯系，而是通過ViewModel層進行交互。ViewModel層通過雙向數據綁定將View層和Model層連接了起來，使得View層和Model層的同步工作完全是自動的。因此開發者只需關注業務邏輯，無需手動操作DOM，復雜的數據狀態維護交給MVVM統一來管理。在Vue.js中MVVM的體現：

對象數據劫持

vue.js 是采用數據劫持結合發布者-訂閱者模式的方式實現MVVM的。vue2.x通過Object.defineProperty()來劫持各個屬性的setter,?getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調，對視圖進行更新。?

通過Object.defineProperty( )對屬性設置一個set函數，當數據改變了就會來觸發這個函數，所以我們只要將一些需要更新的方法放在這里面，就可以實現data更新view了。

實現過程

我們已經知道實現數據的雙向綁定，首先要對數據進行劫持監聽，需要設置一個監聽器Observer，用來監聽所有屬性。如果屬性發上變化了，就需要告訴訂閱者Watcher看是否需要更新。因為訂閱者是有很多個，所以我們需要有一個消息訂閱器Dep來專門收集這些訂閱者，然后在監聽器（發布者）Observer和訂閱者Watcher之間進行統一管理的。接著，我們還需要有一個指令解析器Compile，對每個節點元素進行掃描和解析，view初始化，為watcher綁定相應的更新函數，此時當訂閱者Watcher接收到相應屬性的變化，就會執行對應的更新函數，從而更新視圖。因此接下去我們執行以下3個步驟，實現數據的雙向綁定：

?

1.實現一個監聽器Observer，用來劫持并監聽所有屬性，如果有變動的，就通知訂閱者。

2.實現一個訂閱者Watcher，可以收到屬性的變化通知并執行相應的更新函數，從而更新視圖。

3.實現一個解析器Compile，可以掃描和解析每個節點的相關指令，并初始化模板數據以及初始化相應的訂閱器。

1.實現一個Observer

1.1 對象劫持

Observer是一個數據監聽器，其實現核心方法就是前文所說的Object.defineProperty( )。如果要對所有屬性都進行監聽的話，那么可以通過遞歸方法遍歷所有屬性值，并對其進行Object.defineProperty( )處理。

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已經被監聽了，現在值為：“沒有此書籍”

?

1.2 數組劫持

?

const oldProtoMethods = Array.prototype
const proto = Object.create(oldProtoMethods)function defineReactive(obj,key,value){observer(value) // 有可能對象類型是多層，遞歸劫持Object.defineProperty(obj,key,{get(){// 在get 方法中收集依賴return value},set(newVal){if(newVal !== value){observer(value)update() // 在set方法中觸發更新}}})
}
['push','pop','shift','unshift'].forEach(method=>{Object.defineProperty(proto, method,{get(){return oldProtoMethods[method]}})
})
function observer(target){if(typeof target !== 'object'){return target}// 如果不是對象數據類型直接返回即可if(Array.isArray(target)){Object.setPrototypeOf(target, proto)// 給數組中的每一項進行observrfor(let i = 0 ; i < target.length; i++){observer(target[i])}return}// 重新定義keyfor(let key in target){defineReactive(target, key, target[key])}
}
let obj = {hobby:[{name:'zhuanzhuan'}]}
observer(obj)
// 使用['push','pop','shift','unshift'] 方法，更改數組會觸發視圖更新
obj.hobby.push('轉轉')
// 更改數組中的對象也會觸發視圖更新
obj.hobby[0].name = 'new-name'

?

Object.defineProperty缺點：

• 無法監聽數組的變化

• 需要深度遍歷，浪費內存

?

思路分析中，需要創建一個可以容納訂閱者的消息訂閱器Dep，訂閱器Dep主要負責收集訂閱者，然后再屬性變化的時候執行對應訂閱者的更新函數。所以顯然訂閱器需要有一個容器，將上面的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 = 'canfoo';}, 2000);</script>

?

這時候打開頁面，可以看到頁面剛開始顯示了是'hello world'，過了2s后就變成'canfoo'了。到這里，總算大功告成一半了，但是還有一個細節問題，我們在賦值的時候是這樣的形式 ' ?selfVue.data.name = 'canfoo' ?' 而我們理想的形式是' ?selfVue.name = 'canfoo' ?'為了實現這樣的形式，我們需要在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 = 'canfoo' ?'的形式來進行改變模板數據了。如果想要迫切看到現象的童鞋趕快來獲取代碼！

3.實現Compile

雖然上面已經實現了一個雙向數據綁定的例子，但是整個過程都沒有去解析dom節點，而是直接固定某個節點進行替換數據的，所以接下來需要實現一個解析器Compile來做解析和綁定工作。解析器Compile實現步驟：

1.解析模板指令，并替換模板數據，初始化視圖

2.將模板指令對應的節點綁定對應的更新函數，初始化相應的訂閱器

為了解析模板，首先需要獲取到dom元素，然后對含有dom元素上含有指令的節點進行處理，因此這個環節需要對dom操作比較頻繁，所有可以先建一個fragment片段，將需要解析的dom節點存入fragment片段里再進行處理：

?

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];this.updateText(node, initText);  // 將初始化的數據初始化到視圖中new Watcher(this.vm, exp, function (value) {  // 生成訂閱器并綁定更新函數self.updateText(node, value);});
},
function (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 = 'canfoo';}, 2500);</script>

?

如上代碼，在頁面上可觀察到，剛開始titile和name分別被初始化為 'hello world' 和空，2s后title被替換成 '你好' 3s后name被替換成 'canfoo' 了

到這里，一個數據雙向綁定功能已經基本完成了，接下去就是需要完善更多指令的解析編譯，在哪里進行更多指令的處理呢？答案很明顯，只要在上文說的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: 'canfoo'},methods: {clickMe: function () {this.title = 'hello world';}},mounted: function () {window.setTimeout(() => {this.title = '你好';}, 1000);}});</script>

?

?