let mvvm = new Mvvm({el: '#app',data: {a: {b: 1},c: 2}});

我們在控制臺里看下

被標記的地方就是通過遞歸observe(val)進行數據劫持添加上了get和set，遞歸繼續向a里面的對象去定義屬性，親測通過可放心食用

接下來說一下observe(newVal)這里為什么也要遞歸

還是在可愛的控制臺上，敲下這么一段代碼 mvvm._data.a = {b:'ok'}

然后繼續看圖說話

通過observe(newVal)加上了現在大致明白了為什么要對設置的新值也進行遞歸observe了吧，哈哈，so easy

數據劫持已完成，我們再做個數據代理

數據代理

數據代理就是讓我們每次拿data里的數據時，不用每次都寫一長串，如mvvm._data.a.b這種，我們其實可以直接寫成mvvm.a.b這種顯而易見的方式

下面繼續看下去，+號表示實現部分

function Mvvm(options = {}) {  // 數據劫持observe(data);// this 代理了this._data
+   for (let key in data) {Object.defineProperty(this, key, {configurable: true,get() {return this._data[key];     // 如this.a = {b: 1}},set(newVal) {this._data[key] = newVal;}});
+   }
}// 此時就可以簡化寫法了
console.log(mvvm.a.b);   // 1
mvvm.a.b = 'ok';    
console.log(mvvm.a.b);  // 'ok'

寫到這里數據劫持和數據代理都實現了，那么接下來就需要編譯一下了，把{{}}里面的內容解析出來

數據編譯

function Mvvm(options = {}) {// observe(data);// 編譯    
+   new Compile(options.el, this);    
}// 創建Compile構造函數
function Compile(el, vm) {// 將el掛載到實例上方便調用vm.$el = document.querySelector(el);// 在el范圍里將內容都拿到，當然不能一個一個的拿// 可以選擇移到內存中去然后放入文檔碎片中，節省開銷let fragment = document.createDocumentFragment();while (child = fragment.firstChild) {fragment.appendChild(child);    // 此時將el中的內容放入內存中}// 對el里面的內容進行替換function replace(frag) {Array.from(frag.childNodes).forEach(node => {let txt = node.textContent;let reg = /\{\{(.*)\}\}/;   // 正則匹配{{}}if (node.nodeType === 3 && reg.test(txt)) { // 即是文本節點又有大括號的情況{{}}console.log(RegExp.$1); // 匹配到的第一個分組 如： a.b, clet arr = RegExp.$1.split('.');let val = vm;arr.forEach(key => {val = val[key];     // 如this.a.b});// 用trim方法去除一下首尾空格node.textContent = txt.replace(reg, val).trim();}// 如果還有子節點，繼續遞歸replaceif (node.childNodes && node.childNodes.length) {replace(node);}});}replace(fragment);  // 替換內容vm.$el.appendChild(fragment);   // 再將文檔碎片放入el中
}

看到這里在面試中已經可以初露鋒芒了，那就一鼓作氣，做事做全套，來個一條龍

現在數據已經可以編譯了，但是我們手動修改后的數據并沒有在頁面上發生改變

下面我們就來看看怎么處理，其實這里就用到了特別常見的設計模式，發布訂閱模式

發布訂閱

發布訂閱主要靠的就是數組關系，訂閱就是放入函數，發布就是讓數組里的函數執行

// 發布訂閱模式  訂閱和發布 如[fn1, fn2, fn3]
function Dep() {// 一個數組(存放函數的事件池)this.subs = [];
}
Dep.prototype = {addSub(sub) {   this.subs.push(sub);    },notify() {// 綁定的方法，都有一個update方法this.subs.forEach(sub => sub.update());}
};
// 監聽函數
// 通過Watcher這個類創建的實例，都擁有update方法
function Watcher(fn) {this.fn = fn;   // 將fn放到實例上
}
Watcher.prototype.update = function() {this.fn();  
};let watcher = new Watcher(() => console.log(111));  // 
let dep = new Dep();
dep.addSub(watcher);    // 將watcher放到數組中,watcher自帶update方法， => [watcher]
dep.addSub(watcher);
dep.notify();   //  111, 111

數據更新視圖

• 現在我們要訂閱一個事件，當數據改變需要重新刷新視圖，這就需要在replace替換的邏輯里來處理
• 通過new Watcher把數據訂閱一下，數據一變就執行改變內容的操作

function replace(frag) {// 省略...// 替換的邏輯node.textContent = txt.replace(reg, val).trim();// 監聽變化// 給Watcher再添加兩個參數，用來取新的值(newVal)給回調函數傳參
+   new Watcher(vm, RegExp.$1, newVal => {node.textContent = txt.replace(reg, newVal).trim();    
+   });
}// 重寫Watcher構造函數
function Watcher(vm, exp, fn) {this.fn = fn;
+   this.vm = vm;
+   this.exp = exp;// 添加一個事件// 這里我們先定義一個屬性
+   Dep.target = this;
+   let arr = exp.split('.');
+   let val = vm;
+   arr.forEach(key => {    // 取值
+      val = val[key];     // 獲取到this.a.b，默認就會調用get方法
+   });
+   Dep.target = null;
}

當獲取值的時候就會自動調用get方法，于是我們去找一下數據劫持那里的get方法

function Observe(data) {
+   let dep = new Dep();// 省略...Object.defineProperty(data, key, {get() {
+           Dep.target && dep.addSub(Dep.target);   // 將watcher添加到訂閱事件中 [watcher]return val;},set(newVal) {if (val === newVal) {return;}val = newVal;observe(newVal);
+           dep.notify();   // 讓所有watcher的update方法執行即可}})
}

當set修改值的時候執行了dep.notify方法，這個方法是執行watcher的update方法，那么我們再對update進行修改一下

Watcher.prototype.update = function() {// notify的時候值已經更改了// 再通過vm, exp來獲取新的值
+   let arr = this.exp.split('.');
+   let val = this.vm;
+   arr.forEach(key => {    
+       val = val[key];   // 通過get獲取到新的值
+   });this.fn(val);   // 將每次拿到的新值去替換{{}}的內容即可
};

現在我們數據的更改可以修改視圖了，這很good，還剩最后一點，我們再來看看面試常考的雙向數據綁定吧

雙向數據綁定

    // html結構<input v-model="c" type="text">// 數據部分data: {a: {b: 1},c: 2}function replace(frag) {// 省略...
+       if (node.nodeType === 1) {  // 元素節點let nodeAttr = node.attributes; // 獲取dom上的所有屬性,是個類數組Array.from(nodeAttr).forEach(attr => {let name = attr.name;   // v-model  typelet exp = attr.value;   // c        textif (name.includes('v-')){node.value = vm[exp];   // this.c 為 2}// 監聽變化new Watcher(vm, exp, function(newVal) {node.value = newVal;   // 當watcher觸發時會自動將內容放進輸入框中});node.addEventListener('input', e => {let newVal = e.target.value;// 相當于給this.c賦了一個新值// 而值的改變會調用set，set中又會調用notify，notify中調用watcher的update方法實現了更新vm[exp] = newVal;   });});
+       }if (node.childNodes && node.childNodes.length) {replace(node);}}

大功告成，面試問Vue的東西不過就是這個罷了，什么雙向數據綁定怎么實現的，問的一點心意都沒有，差評！！！

大官人請留步，本來應該收手了，可臨時起意(手癢)，再寫點功能吧，再加個computed(計算屬性)和mounted(鉤子函數)吧

computed(計算屬性) && mounted(鉤子函數)

    // html結構<p>求和的值是{{sum}}</p>data: { a: 1, b: 9 },computed: {sum() {return this.a + this.b;},noop() {}},mounted() {setTimeout(() => {console.log('所有事情都搞定了');}, 1000);}function Mvvm(options = {}) {// 初始化computed,將this指向實例
+       initComputed.call(this);     // 編譯new Compile(options.el, this);// 所有事情處理好后執行mounted鉤子函數options.mounted.call(this); // 這就實現了mounted鉤子函數}function initComputed() {let vm = this;let computed = this.$options.computed;  // 從options上拿到computed屬性   {sum: ?, noop: ?}// 得到的都是對象的key可以通過Object.keys轉化為數組Object.keys(computed).forEach(key => {  // key就是sum,noopObject.defineProperty(vm, key, {// 這里判斷是computed里的key是對象還是函數// 如果是函數直接就會調get方法// 如果是對象的話，手動調一下get方法即可// 如： sum() {return this.a + this.b;},他們獲取a和b的值就會調用get方法// 所以不需要new Watcher去監聽變化了get: typeof computed[key] === 'function' ? computed[key] : computed[key].get,set() {}});});}

寫了這些內容也不算少了，最后做一個形式上的總結吧

總結

通過自己實現的mvvm一共包含了以下東西

1. 通過Object.defineProperty的get和set進行數據劫持
2. 通過遍歷data數據進行數據代理到this上
3. 通過{{}}對數據進行編譯
4. 通過發布訂閱模式實現數據與視圖同步
5. 通過通過通過，收了，感謝大官人的留步了