vue原理簡介

寫vue也有一段時間了，對vue的底層原理雖然有一些了解，這里總結一下。

vue.js中有兩個核心功能：響應式數據綁定，組件系統。主流的mvc框架都實現了單向數據綁定，而雙向綁定無非是在單向綁定基礎上給可輸入元素添加了change事件，從而動態地修改model和view。

1. MVC，MVP，MVVM

1.1 MVC

MVC模式將軟件分為下面三個部分

1.視圖（View）：用戶界面
2.控制器（Controller）：業務邏輯
3.模型（Model）：數據保存

MVC各個部分之間通信的方式如下：

1.視圖傳送指令到控制器
2.控制器完成業務邏輯后要求模型改變狀態
3.模型將新的數據發送到視圖，用戶得到反饋

示意圖如下：

以上所有通信都是單向的。接受用戶指令的時候，MVC有兩種方式，一種是通過視圖接受指令，然后傳遞給控制器。另一種是用戶直接給控制器發送指令。

實際使用中可能更加靈活，下面是以Backbone.js為例說明。

1.用戶可以向視圖（View）發送指令（DOM事件），再由View直接要求Model改變狀態。
2.用戶也可以向Controller發送指令（改變URL觸發hashChange事件），再由Controller發送給View。
3.Controller很薄，只起到路由作用，而View非常厚，業務邏輯都放在View。所以Backbone索性取消了Controller，只保留了Router（路由器）

MVC模式體現了“關注點分離”這一設計原則，將一個人機交互應用涉及到的功能分為三部分，Model對應應用狀態和業務功能的封裝，可以將它理解為同時包含數據和行為的領域模型，Model接受Controller的請求並完成相應的業務處理，在應用狀態改變的時候可以向View發出通知。View實現可視化界面的呈現和用戶的交互操作，VIew層可以直接調用Model查詢狀態，Model也可以在自己狀態發生變化的時候主動通知VIew。Controller是Model和View之間的連接器，用於控制應用程序的流程。View捕獲用戶交互操作后直接發送給Controller，完成相應的UI邏輯，如果涉及業務功能調用Controller會調用Model，修改Model狀態。Controller也可以主動控制原View或者創建新的View對用戶交互予以響應。

1.2 MVP

MVP模式將Controller改名為Presenter，同時改變了通信方向，如下圖：

1.各部分之間的通信都是雙向的。
2.視圖（View）和模型（Model）不發生聯系，都是通過表現（Presenter）傳遞
3.View非常薄，不部署任何業務邏輯，稱為被動視圖（Passive View），即沒有任何主動性，而Presenter非常厚，所有邏輯都這里。

MVP適用於事件驅動的應用架構中，如asp.net web form，windows forms應用。

1.3 MVVM

MVVM模式將Presenter層替換為ViewModel，其他與MVP模式基本一致，示意圖如下：

它和MVP的區別是，采用雙向綁定，視圖層（View）的變動，自動反映在ViewModel，反之亦然。Angular和Vue，React采用這種方式。

MVVM的提出源於WPF，主要是用於分離應用界面層和業務邏輯層，WPF，Siverlight都基於數據驅動開發。

MVVM模式中，一個ViewModel和一個View匹配，完全和View綁定，所有View中的修改變化，都會更新到ViewModel中，同時VewModel的任何變化都會同步到View上顯示。之所以自動同步是ViewModel中的屬性都實現了observable這樣的接口，也就是說當使用屬性的set方法，會同時觸發屬性修改的事件，使綁定的UI自動刷新。

2. 訪問器屬性

訪問器屬性是一種特殊的屬性，不能再對象中直接定義訪問器屬性，必須通過defineProperty()方法定義訪問器屬。

Object.defineProperty()方法直接在對象上定義一個新屬性，或修改一個對象現有的屬性，並返回這個對象。該方法允許精確添加或者修改對象的屬性。通過賦值操作（例如object.name = xxx）添加的普通屬性是可枚舉的，可枚舉（for ... in或Object.keys方法），這些屬性的值可以被修改或刪除。默認情況下，使用Object.defineProperty()添加的屬性值是不可修改的。 方法的原型如下：

Object.defineProperty(obj, prop, descriptor)
obj:要在其上定義屬性的對象
prop: 要定義或者修改的屬性名字
descriptor: 將被定義或修改的屬性描述符

對象里目前存在的屬性描述符可以歸納為兩類：數據描述符和存取描述符。數據描述符是一個具有值的屬性，configurable為true時，這個值可是可寫的，否則不可寫。存取描述符是由getter，setter函數描述的屬性。描述符必須是這兩種類型（數據描述符和讀取描述符）之一，不可能同時是這兩者。

數據描述符和存取描述符必須有下面可選鍵值：

1. configurable：當且僅當改屬性的configurable為true的時候，該屬性描述符才能被修改，同時該屬性也能從對應的對象上被刪除。默認為false。
2. enumerable：當且僅當改屬性的enmerable為true的時候，改屬性才能出現在對象的枚舉屬性中，默認為false。

數據描述符同時具有以下可選鍵值：

1. value：該屬性對應的值。可以是任何JavaScript有效值，數值，對象，函數等，默認為undefined。
2. writable：當且僅當改屬性的writable為true時，value才能被賦值運算符改變，就是用“=”賦值。默認為false。

存取描述符同時具有以下可選鍵值：

1. get：一個給屬性提供getter的方法，如果沒有getter則為undefined。訪問這個屬性的時候，該方法會被執行，沒有參數，但是會傳入this對象（由於繼承關系，這里的this並不一定是定義該屬性的對象）。默認為undefined。
2. set：一個給屬性提供setter的方法，如果沒有setter則為undefined。當屬性值被修改的時候，觸發這個setter方法。這個方法接受唯一參數，即改屬性新的參數值。默認為undefined。

如果一個描述符沒有value，writable，get，set任意一個關鍵字，那么它將被認為是一個數據描述符。如果一個描述符同時有（value或writable）和（get或set）關鍵字，會產生一個異常。

這些選項不一定是自身屬性，如果是繼承來的也要考慮。為了確認保留這些默認值是自己定義的，可能要在這之前凍結Object.property，明確指定所有的選項，或者通過Object.create(null)將__proto__屬性指向null，要不然使用起來就有些混亂。下面使用Object.create(null)方法來給對象obj定義一個“干凈”的屬性。

    // 使用__prop__定義
   var obj = {}
   var descriptor = Object.create(null);
   // 默認沒有enumberable，configurable，writable
   descriptor.value = 'static';
   Object.defineProperty(obj, 'key', descriptor);
   console.log(obj); 

代碼輸出結果如下：

1. 定義一個空對象obj
2. 定義一個屬性描述符descriptor，使用Object.Create方法繼承null對象，這樣沒有繼承屬性
3. 設置數據描述符value，值為‘static’
4. 使用Object.defineProperty方法給obj對象定義key屬性，使用descriptor描述符，描述符中只有一個數據描述符value，其他的都是默認值

上面的語句和下面的效果是一樣的，就是使用Object.defineProperty方法給obj對象設置一個key屬性，屬性的屬性描述符都是默認值：

    // 顯示定義
    var obj = {}
    Object.defineProperty(obj, 'key', {
        enumerable: false,
        configurable: false,
        writable: false,
        value: "statics"
    });
    console.log(obj); 

輸出如下：

 

還可以循環使用同一對象最為對象描述符使用，代碼如下：

    // 循環使用統一對象
    function withValue (value) {
        var d = withValue.d || (
            withValue.d = {
                enumerable: false,
                writable: false,
                configurable: false,
                value: null
            }
        );
        d.value = value;
        return d;
    }

    var obj = {}
    Object.defineProperty(obj, 'key', withValue('static'));
    console.log(obj); 

輸出結果如下：

 

如果對象中不存在指定的屬性，Object.defineProperty()就創建這個屬性。當描述符中省略某些字段時，這些字段將使用它們的默認值。擁有布爾值的字段的默認值都是false，value，get，set字段默認值是undefined。一個沒有get，set，value，writable定義的屬性被稱為“通用的”，並被鍵入為一個數據描述符。

    // 在對象中添加一個屬性與數據描述符的實例, 對象o擁有了屬性a，值為37
    var obj = {};
    Object.defineProperty(obj, "a", {
        value: 37,
        writable: false,
        enumerable: false,
        configurable: true
    });
    console.log(obj); 

輸出結果如下：

 

    // 在對象中添加一個屬性與數據描述符的實例, 對象o擁有了屬性a，值為37
    var obj = {};
    Object.defineProperty(obj, "a", {
        value: 37,
        writable: false,
        enumerable: false,
        configurable: true
    });
    console.log(obj);

 輸出結果如下：

    // 在對象中添加一個屬性與存取描述符,對象o擁有了屬性b，值為38
    var bValue;
    Object.defineProperty(obj, 'b', {
    get: function () {
       return bValue;
    },
    set: function (newValue) {
       bValue = newValue;
    },
    enumerable: true,
    configurable: true
    });
    // o.b的值現在總是與bValue相同，除非重新定義o.b
    bValue = 200;
    console.log(obj.b); 

 輸出結果如下： 

    // 數據描述符和存取描述符不能混合使用，否則會報錯
    var obj = {};
    Object.defineProperty(obj, 'confict', {
        value: '0x9f91102',
        get: function () {
            return 0xdeadbeef;
        }
    });
    // 報錯：Uncaught TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #<Object> 

2.1 修改屬性

如果屬性已經存在，Object.defineProperty()方法將嘗試根據描述符中的值以及對象當前的配置來修改這個屬性。如果舊對象描述符configurable為false，則屬性被認為是“不可配置的”，並且沒有屬性可以改變（除了單向改變writable為false）。當屬性不可配置時，不能再數據和訪問器屬性類型之間切換。當時圖改變不可配置屬性（除了writable屬性之外）的值時會拋出TypeError，除非當前值和心智相同。

2.2 Writable屬性

當writable屬性設置為false時，改屬性稱為“不可寫”。它不能被重新分配。

    // 創建一個新對象
    var o = {};
    Object.defineProperty(o, 'a', {
        value: 37,
        configurable: false,
        writable: false
    });
    console.log(o.a); // 輸出37
    o.a = 38;
    console.log(o.a); // writable屬性為false，o.a的值仍然是37，如果是嚴格模式，這里會拋錯："a" is read-only

2.3 Enumerable特性

enumerable定義了對象的屬性是否可以在for...in循環和Object.keys()中枚舉。

    var o = {};
    Object.defineProperty(o, 'a', {value: 1, enumerable: true});
    Object.defineProperty(o, 'b', {value: 2, enumerable: false});
    // 沒有設置 enumberable屬性默認值是false
    Object.defineProperty(o, 'c', {value: 3});
    // 如果使用直接賦值的方式創建對象屬性，則這個屬性的enumerable為true
    o.d = 4;
    console.log(Object.keys(o)); // 輸出["a", "d"]
    console.log(o.propertyIsEnumerable('a')); // 輸出true
    console.log(o.propertyIsEnumerable('b')); // 輸出false
    console.log(o.propertyIsEnumerable('c')); // 輸出false
    console.log(o.propertyIsEnumerable('d')); // 輸出true 

2.4 Configurable特性

configurable特性表示對象的屬性是否可以被刪除，以及除writable特性外的其他特性是否可以被修改

    var o = {};
    Object.defineProperty(o, 'a', {
        get: function () {
            return 1;
        },
        configurable: false
    });
    console.log(o.a); // 輸出1

    Object.defineProperty(o, 'a', {configurable: true}); // Uncaught TypeError: Cannot redefine property: a
    Object.defineProperty(o, "a", {enumerable: true}); // Uncaught TypeError: Cannot redefine property: a
    Object.defineProperty(o, "a", {
        set: function () {
        }
    }); // Uncaught TypeError: Cannot redefine property: a
    Object.defineProperty(o, "a", {
        get: function () {
        }
    }); // Uncaught TypeError: Cannot redefine property: a
    delete o.a;
    console.log(o.a); // 對染delete語句沒有報錯，但是沒有真正刪除a屬性，輸出1

2.5 添加多個屬性和默認值

使用點運算符和Object.defineProperty()為對象的屬性賦值，數據描述符的屬性默認值是不同的。

    var o = {};
    o.a = 1;
    // 上面使用點語法定義屬性，等同於下面代碼，注意writable，configurable，enumerable的默認屬性為false，但是這里使用點語法是true
    Object.defineProperty(o, "a", {
        value: 1,
        writable: true,
        configurable: true,
        enumerable: true
    });

    Object.defineProperty(o, "a", {value: 1});
    // 上面使用Object.defineProperty()定義屬性，等同於下面代碼
    Object.defineProperty(o, "a", {
        value: 1,
        writable: false,
        configurable: false,
        enumerable: false
    });

2.6 一般的getter和setter

下面的例子展示如何實現一個自存檔對象，當設置temperture屬性時，archive數組就會獲取日志

   function Archiver () {
       var temperature = null;
       var archiver = [];
       Object.defineProperty(this, 'temperature', {
           get: function () {
               console.log('get!');
               return temperature;
           },
           set: function (value) {
               temperature = value;
               archiver.push({val: temperature});
           }
       });
       this.getArchive = function () {
           return archiver;
       }
   }

   var arc = new Archiver();
   console.log(arc.temperature); // 輸出get，但是arc.temperature是null
   arc.temperature = 11; // 觸發archiver.push({val: temperature})
   arc.temperature = 13; // 觸發archiver.push({val: temperature})
   console.log(arc.getArchive()); // 輸出[{val: 11}, {val: 13}]

1. 定義一個方法類Archive，在內部有私有變量temperature，archiver，
2. 在方法內使用Object.defineProperty()方法定義屬性temperature，定義存取描述符get，放回私有變量temperature，定義存取描述符set，用傳遞的參數給私有變量temperature賦值
3. 定義特權方法getArchive，返回私有變量temperature
4. 使用new操作符定義類Archive實例arc
5. 輸出實例arc的temperature屬性，調用get方法，返回私有變量temperature的值null
6. 給實例arc的temperatur屬性賦值，調用set方法，傳遞參數11，觸發archiver.push({val: 11})
7. 給實例arc的temperatur屬性賦值，調用set方法，傳遞參數13，觸發archiver.push({val: 13})
8. 輸出實例arc的temperature屬性，調用get方法，返回私有變量temperature的值[{val: 11}, {val: 13}]

   var pattern = {
       get: function () {
           return 'I alway return this string,whatever you have assigned';
       },
       set: function () {
           console.log('給屬性myname賦值')
           this.myname = 'this is my name string';
       }
   }
   function TestDefineSetAndGet () {
       Object.defineProperty(this, 'myproperty', pattern);
   }
   var instance = new TestDefineSetAndGet();
   instance.myproperty = 'test'; // 輸出 “給屬性myname賦值”
   console.log(instance.myproperty); // 輸出 “I alway return this string,whatever you have assigned”
   console.log(instance.myname); // 輸出 “this is my name string”

1. 定義屬性描述符pattern，屬性描述符上有存取描述符get，返回字符串“I alway return this string,whatever you have assigned”，存取描述符set，先輸出“給屬性myname賦值”，給當前對象的myname屬性賦值“this is my name string”
2. 定義類方法TestDefineSetAndGet，方法內部使用Object.defineProperty()給當前對象定義一個屬性“ myproperty”，使用屬性描述符pattern
3. 使用new操作符定義類TestDefineSetAndGet的實例instance
4. 給實例的屬性myproperty賦值“test”，因為使用Object.defineProperty給對象定義屬性的時候沒有指定writable，這里賦值無效。在get函數里返回的是固定值。在set函數里輸出“給屬性myname賦值”
5. 輸出實例的屬性myproperty，訪問get函數，返回“I alway return this string,whatever you have assigned”
6. 輸出實例的屬性myname，因為訪問過set函數，在setg函數中給當前對象賦過值，所以myname的值為“this is my name string”

2.7 繼承屬性

如果訪問者的屬性是被繼承的，它的get和set方法會在子對象的屬性被訪問或者修改時調用。如果這些方法用一個變量保存，會被所有對象共享。

    function myClass () {
    }
    var value;
    Object.defineProperty(myClass.prototype, 'x', {
        get () {
            return value
        },
        set (x) {
            value = x;
        }
    });
    var a = new myClass();
    var b = new myClass();
    a.x = 1;
    console.log(a.x); // 1
    console.log(b.x); // 1 

在類myClass的原型對象上定義了x屬性，這個屬性會被類myClass的所有實例共享。通過將值保存在另一個屬性中固定，在get，set中，this指向某個被訪問和修改屬性的對象。

代碼如下： 

        var obj = {}
        Object.defineProperty(obj, 'hello', {
            get: function () {
                console.log('get方法被調用')
            },
            set: function (v) {
                console.log("set方法被調用了，參數是" + v)
            }
        })
        obj.hello; // get方法被調用
        obj.hello = 'abc'; // set方法被調用了，參數是abc 

 可以像普通屬性一樣讀取，設置訪問器屬性，訪問器屬性比較特殊，讀取或設置訪問器屬性的值其實是調用內部get，set方法來操作屬性。為屬性賦值，就是調用set方法並使用參數給屬性賦值。get，set方法內部的this指針指向obj，這意味着get和set方法可以操作對象內部的值。另外，訪問器屬性會覆蓋同名的普通屬性，因為訪問器屬性優先訪問，同名的屬性會被忽略。 

    function myClass () {
    }
    Object.defineProperty(myClass.prototype, 'x', {
        get () {
            return this.stored_x;
        },
        set (x) {
            this.stored_x = x;
        }
    });
    var a = new myClass();
    var b = new myClass();
    a.x = 1;
    console.log(a.x); // 1
    console.log(b.x); // undefined

 不像訪問者屬性，值屬性始終在對象自身上設置，而不是一個原型。如果一個不可寫的屬性被繼承，它仍然可以防止修改對象的屬性。

    function myClass () {
    }
    myClass.prototype.x = 1;
    Object.defineProperty(myClass.prototype, 'y', {
        writable: false,
        value: 1
    });
    var a = new myClass();
    a.x = 2;
    console.log(a.x); // 2
    console.log(myClass.prototype.x); // 1
    a.y = 2;
    console.log(a.y); // 1
    console.log(myClass.prototype.y); // 1 

1. 定義方法類myClass
2. 在方法原型對象上通過點語法定義屬性x，值為1，它是可寫的，可配置的，可枚舉的
3.  通過Object.defineProperty()方法在方法原型上定義屬性y，它是可寫的，不可配置的，不可枚舉的
4. 定義一個myClass類的實例
5. 訪問實例的屬性x，賦值為2，對象本身沒有這個屬性，在它原型對象上有這個屬性，這個屬性是可寫的，賦值為2
6. 輸出實例x的屬性為2
7. 輸出方法類myClass的原型對象上的屬性x是1
8. 訪問實例的屬性y，它是通過Object.defineProperty()方法定義的，是不可寫的，賦值為2，它的值仍然是1
9. 出事方法類myClass的原型對象上的屬性y，它仍然是1

介紹完訪問器屬性之后我們來看看vue是如何實現雙向綁定的。

3. vue.js雙向綁定

3.1. 極簡雙向綁定

vue.js最重要的概念是數據雙向綁定，也是MVVM主要特點。

html代碼：

    <input type="text" id="a">
    <span id="b"></span>

 JavaScript代碼：

        var obj = {};
        Object.defineProperty(obj, 'hello', {
            set: function (newVal) {
              document.getElementById('a').value = newVal;
              document.getElementById('b').innerHTML = newVal;
            }
        })
        document.addEventListener('keyup', function (e) {
          obj.hello = e.target.value;
        });

 效果：

這個效果就是在文本框中輸入的值會顯示在旁邊的<span>標簽里。這個例子就是雙向綁定的實現，但是僅僅為了說明原理，這個和我們平時用的vue.js還有差距，下面是我們常見的vue.js寫法

html代碼：

    <input type="text" v-model="text">
    {{ text }} 

JavaScript代碼：

  var vm = new Vue({
    el: 'app',
    data: {
      text: 'hello world'
    }
  }) 

為了實現這樣的容易理解的代碼vue.js背后做了很多工作，我們一一分解。

1. 輸入框以及文本節點與data中的數據綁定顯示
2. 輸入框變化的時候，data中的數據同步變化。即MVVM中 view => viewmodel的變化
3. data中的數據變化時，文本節點顯示的內容同步變化。即MVVM中viewmode => view的變化

3.2 數據初始化綁定

介紹數據初始化綁定之前先說一下DocumentFragment。DocumentFragment（文檔片段）可以看做是節點容器，它可以包含多個子節點，可以把它插入到DOM中，只有它的子節點會插入目標節點，所以可以把它看做是一組節點容器。使用DocumentFragment處理節點速度和性能優於直接操作DOM。Vue進行編譯的時候就是將掛載目標的所有子節點劫持到DocumentFragment中，經過處理后再將DocumentFragment整體返回到掛載目標。實例代碼如下：

        var dom = nodeToFragment(document.getElementById("app"));
        console.log(dom);
        function nodeToFragment (node, vm) {
            var flag = document.createDocumentFragment();
            var child;
            while (child = node.firstChild) {
                flag.appendChild(child); // 劫持node的所有節點
            }
            return flag;
        }
        document.getElementById("app").appendChild(dom); 

有了文檔片段之后再看看初始化綁定。

html代碼：

<div id="app">
    <input type="text" v-model="text">
    {{text}}
</div> 

JavaScript代碼：

    function compile (node, vm) {
        var reg = /\{\{(.*)\}\}/;
        // 節點類型為元素,使用node.nodeType屬性
        if (node.nodeType === 1) {
            var attr = node.attributes;
            // 解析屬性
            for (var i = 0; i < attr.length; i++) {
                if (attr[i].nodeName === 'v-model') {
                    var name = attr[i].nodeValue; // 獲取v-model綁定的屬性名
                    node.value = vm.data[name]; // 將data的值賦給該node
                    node.removeAttribute('v-model');
                }
            }
        }
        // 節點類型為text,使用node.nodeType屬性
        if (node.nodeType === 3) {
            if (reg.test(node.nodeValue)) {
                var name = RegExp.$1; // 獲取匹配到的字符串
                name = name.trim()
                node.nodeValue = vm.data[name]; // 將該data的值付給該node
            }
        }
    }

    function nodeToFragment (node, vm) {
        var flag = document.createDocumentFragment();
        var child;
        while (child = node.firstChild) {
            compile(child, vm);
            // 將子節點劫持到文檔片段中
            flag.appendChild(child);
        }
        return flag;
    }

    // 構造函數
    function Vue (options) {
        this.data = options.data;
        var id = options.el;
        var dom = nodeToFragment(document.getElementById(id), this);
        // 編譯完成后把dom返回到app中
        document.getElementById(id).appendChild(dom);
    }

    var vm = new Vue({
        el: 'app',
        data: {
            text: 'hello world'
        }
    }); 

最終效果：

我們看到hello word已經綁定到input標簽和節點中了

先看compile方法，這個方法主要負責給node節點賦值
1. compile方法接收兩個參數，第一個是DOM節點，第二個vm是當前對象
2. 判斷dom節點類型，如果是1，表示元素（這里判斷不太嚴謹，只是為了說明原理），在node節點的所有屬性中查找nodeName為“v-model”的屬性，找到屬性值，這里是“text”。用當前對象中名字為“text”的屬性值給節點賦值，最后刪除這個屬性，就是刪除節點的v-model屬性。
3. 判斷dom節點類型，如果是3，表示是節點內容，用正則表達式判斷是“{{text}}”這樣的字符串，用當前對象中名字為“text”的屬性值給節點賦值，直接覆蓋掉“{{text}}”
4.這里是簡單的例子，實際情況是dom結構要比這個復雜的多，可能會遞歸的尋找節點，判斷節點類型，操作賦值。

nodeToFragment方法負責創建文檔片段，並將compile處理過的子節點劫持到這個文檔片段中
1. 創建一個文檔片段
2. 循環查找傳入的node節點，調用compile方法給節點賦值
3. 將賦值后的節點劫持到文檔片段中

Vue構造函數
1. 用傳入參數的data屬性給當前對象的data屬性賦值
2. 用傳入參數的id標記查找掛載節點，調用nodeToFragment方法獲取劫持后的文檔片段，這個過程稱為編譯
3. 編譯完成后，將文檔片段插入到指定的當前節點中

實例化vue
1. 實例化一個vue對象，el屬性為掛載節點的id，data屬性為要綁定的屬性及屬性值

3.3 響應式數據綁定

 初始化綁定只是實現了第一步，然后我們要實現的是在文本框中輸入內容的時候，vue實例中的屬性值也跟着變化。思路是在文本框中輸入數據的時候，觸發文本框的input事件（也可以是keyup，change），在相應的事件處理程序中，獲取輸入內容賦值給當前vue實例vm的text屬性。這里利用上面介紹的Object.defeinProperty()方法來給vue實例中data中的屬性重新定義為訪問器屬性，就是在定義這個屬性的時候添加get，set這兩個存取描述符，這樣給vm.text賦值的時候就會觸發set方法。然后在set方法中更新vue實例屬性的值。看下面的html，js代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>響應式數據綁定</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="text"/>
    {{ text }}
</div>
<script>
    /**
     * 使用defineProperty將data中的text設置為vm的訪問器屬性
     * @param obj 對象
     * @param 屬性名
     * @param 屬性值
     * */
    function defineReactive (obj, key, val) {
        Object.defineProperty(obj, key, {
            get: function () {
                return val
            },
            set: function (newVal) {
                if (newVal === val) {
                    return
                }
                val = newVal
                // 輸出日志
                console.log(`set方法觸發屬性值變化${val}`)
            }
        })
    }
    /**
     * 給vue實例定義訪問器屬性
     * @param obj vue實例中的數據
     * @param vm vue對象
     * */
    function observe (obj, vm) {
        Object.keys(obj).forEach(function (key) {
            defineReactive(vm, key, obj[key]);
        })
    }
    /**
     * 編譯過程，給子節點初始化綁定vue實例中的屬性值
     * @param node 子節點
     * @param vm vue實例
     * */
    function compile (node, vm) {
        let reg = /\{\{(.*)\}\}/
        // 節點類型為元素
        if (node.nodeType === 1) {
            let attr = node.attributes
            // 解析屬性
            for (let i = 0; i < attr.length; i++) {
                if (attr[i].nodeName === 'v-model') {
                    // 獲取v-model綁定的屬性名，v-model一般是可輸入的dom，可修改的dom
                    let name = attr[i].nodeValue
                    // 添加監聽事件
                    node.addEventListener('input', function (e) {
                        // 給相應的data屬性賦值，進而觸發該屬性的set方法
                        vm[name] = e.target.value;
                    });
                    // 將data的值賦給該node
                    node.value = vm.data[name];
                    node.removeAttribute('v-model')
                }
            }
        }
        // 節點類型為text，這里只是顯示數據的dom
        if (node.nodeType === 3) {
            if (reg.test(node.nodeValue)) {
                // 使用震澤表達式獲取匹配到的字符串
                let name = RegExp.$1
                name = name.trim()
                // 將data的值賦給該node.nodeValue
                node.nodeValue = vm.data[name]
            }
        }
    }
    /**
     * DocumentFragment文檔片段，可以看作節點容器，它可以包含多個子節點，當將它插入到dom中時只有子節點插入到目標節點中。
     * 使用documentfragment處理節點速度和性能要高於直接操作dom。vue編譯的時候，就是將掛載目標的所有子節點劫持到documentfragment
     * 中，經過處理后再將documentfragment整體返回到掛載目標中。
     * @param node 節點
     * @param vm vue實例
     * */
    function nodeToFragment (node, vm) {
        var flag = document.createDocumentFragment();
        var child;
        while (child = node.firstChild) {
            compile(child, vm);
            flag.appendChild(child);
        }
        return flag;
    }
    /*vue類*/
    function Vue (options) {
        this.data = options.data
        let data = this.data
        // 給vue實例的data定義訪問器屬性，覆蓋原來的同名屬性
        observe(data, this)
        let id = options.el
        let dom = nodeToFragment(document.getElementById(id), this)
        // 編譯，劫持完成后將dom返回到app中
        document.getElementById(id).appendChild(dom)
    }

    /*定義一個vue實例*/
    let vm = new Vue({
        el: 'app',
        // 這里的data屬性不是訪問器屬性
        data: {
            text: 'hello world!'
        }
    })
</script>
</body>
</html> 

修改文本框中的內容，vue實例中的屬性值也跟着變化，如下截圖：

下面不再逐句分析，只說重點的。

1. 在defineReactive方法中，vue實例中的data的屬性重新定義為訪問器屬性，並在set方法中將新的值更新到這個屬性上
2. 在observe方法中，遍歷vue實例中data的屬性，逐一調用defineReactive方法，把他們定義為訪問器屬性
3. 在compile方法中，如果是input這樣的標簽，給它添加事件（也可以是keyup，change），監聽input值變化，並給vue實例中相應的訪問器屬性賦值
4. 在Vue類方法中，調用observer方法，傳入當前實例對象和對象的data屬性，將data屬性中的子元素重新定義為當前對象的訪問器屬性

set方法被觸發之后，vue實例的text屬性跟着變化，但是<span>的內容並沒有變化，下面的內容將會介紹“訂閱/發布模式”來解決這個問題。

3.4 雙向綁定的實現

在實現雙向綁定之前要先學習一下“訂閱/發布模式”。訂閱發布模式（又稱為觀察者模式）定義一種一對多的關系，讓多個觀察者同時監聽一個主題對象，主題對象狀態發生改變的時候觀察者都會得到通知。

發布者發出通知 => 主題對象收到通知並推送給訂閱者 => 訂閱者執行相應的操作

看下面的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>訂閱/發布模式</title>
</head>
<body>
<script>
    /**
     * 定義一個發布者publisher
     * */
    var pub = {
        publish: function () {
            dep.notify();
        }
    }
    /**
     * 三個訂閱者
     * */
    var sub1 = {
        update: function () {
            console.log(1);
        }
    };
    var sub2 = {
        update: function () {
            console.log(2);
        }
    };
    var sub3 = {
        update: function () {
            console.log(3);
        }
    }
    /**
     * 一個主題對象
     * */
    function Dep () {
        this.subs = [sub1, sub2, sub3];
    }
    Dep.prototype.notify = function () {
        this.subs.forEach(function (sub) {
            sub.update();
        })
    }
    // 發布者發布消息，主題對象執行notifiy方法，觸發所有訂閱者響應，執行update
    var dep = new Dep();
    pub.publish();
</script>
</body>
</html>

 運行結果如下截圖：

1. 定義發布者對象pub，對象中定義publish方法，方法調用主題對象實例dep的notify()方法
2. 定義三個訂閱者對象，對象中定義update方法，三個對象的update方法分別輸出1，2，3
3. 定義一個主題方法類，主題對象中定義數組屬性subs，包含三個訂閱者對象
4. 在主題方法類的原型對象上定義通知方法notify，方法中循環調用三個訂閱者對象的update()方法
5. 實例化主題方法類得到實例dep
6. 調用發布者對象的通知方法notifiy()，分別輸出1，2，3

每當創建一個Vue實例的時候，主要做了兩件事情，第一是監聽數據：observe(data)，第二個是編譯HTML：nodeToFragment(id)。
在監聽數據過程中，為data的每一個屬性生成主題對象dep。
在編譯HTML的過程中，為每個與數據綁定相關的節點生成一個訂閱者watcher，watcher會將自己添加到相應屬性的dep中。
前面已經實現了：修改輸入框內容 => 在事件回調函數中修改屬性值 => 觸發屬性set方法。
接下來我們要實現的是：發出通知dep.notify() => 觸發訂閱者的updata方法 => 更新視圖，實現這個目標的關鍵是如何將watcher添加到關聯屬性的dep中去。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雙向綁定的實現</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="text">
    {{ text }}
</div>
<script>
    /**
     * 使用defineProperty將data中的text設置為vm的訪問器屬性
     * @param obj 對象
     * @param key 屬性名
     * @param val 屬性值
     */
    function defineReactive(obj, key, val) {
        // 發布者對象
        var dep = new Dep();
        Object.defineProperty(obj, key, {
            get: function () {
                // 依賴收集，如果主題對象類的靜態屬性target有值， 此時Watcher方法被調用，給主題對象添加訂閱者
                if (Dep.target) dep.addSub(Dep.target);
                return val;
            },
            set: function (newVal) {
                if (newVal === val) return
                val = newVal;
                // 屬性被修改時通知變更，主題對象作為發布者收到通知推送給訂閱者，訂閱者收到消息回調
                dep.notify();
            }
        })
    }

    /**
     * 給vue實例定義訪問器屬性，將Vue中的data對象中的屬性轉化成getter，setter
     * @param obj vue實例中的數據
     * @param vm vue對象
     */
    function observe(obj, vm) {
        Object.keys(obj).forEach(function (key) {
            defineReactive(vm, key, obj[key])
        })
    }

    /**
     * DocumentFragment文檔片段
     * @param node 節點
     * @param vm vue實例
     * */
    function nodeToFragment(node, vm) {
        var flag = document.createDocumentFragment();
        var child;
        while (child = node.firstChild) {
            // 節點編譯，生成Watcher
            compile(child, vm);
            flag.appendChild(child);
        }
        return flag;
    }

    /**
     * 給子節點初始化綁定vue實例中的屬性值，並為節點生成Watcher
     * @param node 子節點
     * @param vm vue實例
     */
    function compile(node, vm) {
        var reg = /\{\{(.*)\}\}/;
        // 節點類型為元素，可輸入的dom
        if (node.nodeType === 1) {
            var attr = node.attributes;
            // 解析屬性
            for (var i = 0; i < attr.length; i++) {
                if (attr[i].nodeName === 'v-model') {
                    // 獲取v-model綁定的屬性名
                    var name = attr[i].nodeValue;
                    node.addEventListener('input', function (e) {
                        // 給相應的data屬性賦值，觸發set方法
                        vm[name] = e.target.value
                    });
                    // 將data的值賦給該node
                    node.value = vm[name];
                    node.removeAttribute('v-model');
                }
            }
            new Watcher(vm, node, name, 'input')
        }
        if (node.nodeType === 3) {
            if (reg.test(node.nodeValue)) {
                var name = RegExp.$1; // 獲取匹配到的字符串
                name = name.trim();
                // 將data的值賦給該node，訂閱，同上
                new Watcher(vm, node, name, 'text');
            }
        }
    }

    /**
     * 編譯 HTML 過程中，為每個與 data 關聯的節點生成一個 Watcher，收集依賴的時候會addSub到subs集合中，修改data數據的時候觸發dep對象的
     　　　* notify通知所有Wathcer對象去修改對應視圖
     * @param vm
     * @param node
     * @param name
     * @param nodeType
     * @constructor
     */
    function Watcher(vm, node, name, nodeType) {
        // 將當前對象賦值給全局變量Dep.target
        Dep.target = this;
        this.name = name;
        this.node = node;
        this.vm = vm;
        this.nodeType = nodeType;
        // 更新
        this.update();
        // 設置為空，避免重復添加訂閱者
        Dep.target = null;
    }
    Watcher.prototype = {
        // 更新
        update: function () {
            /**調用get,這里Dep.target不為空，getter中會將當前屬性添加到訂閱者集合中，update函數執行完之后就不行了*/
            this.get();
            if (this.nodeType === 'text') {
                this.node.nodeValue = this.value;
            }
            if (this.nodeType === 'input') {
                this.node.value = this.value;
            }
        },
        get: function () {
            // this.vm[this.name] 觸發getter
            this.value = this.vm[this.name];
        }
    }

    /**
     * 定義一個發布者
     * @constructor
     */
    function Dep() {
        // 訂閱者集合
        this.subs = [];
    }

    /**
     * 發布者，添加訂閱者和通知變化
     * @type {{addSub: Dep.addSub, notify: Dep.notify}}
     */
    Dep.prototype = {
        // 添加訂閱者
        addSub: function (sub) {
            this.subs.push(sub);
        },
        // 輪詢訂閱者，通知變化，觸發更新
        notify: function () {
            this.subs.forEach(function (sub) {
                sub.update();
            });
        }
    };

    /**
     * 定義Vue類
     * @param options Vue參數選項
     * @constructor
     */
    function Vue(options) {
        this.data = options.data;
        var data = this.data;
        observe(data, this);
        var id = options.el;
        // 編譯，收集依賴
        var dom = nodeToFragment(document.getElementById(id), this);
        // 編譯完成后，將dom返回到app中
        document.getElementById(id).appendChild(dom);
    }

    // 定義Vue實例
    var vm = new Vue({
        el: 'app',
        data: {
            text: 'hello world'
        }
    })
</script>
</body>
</html>

 

最終效果如下截圖：

這里不再逐句分析，只把重點說明一下
1. 定義主題對象Dep，對象中有addSub和notify兩個方法，前者負責向當前對象中添加訂閱者，后者輪詢訂閱者，調用訂閱者的更新方法update()
2. 定義觀察者對象方法Watcher，在方法中先將自己賦給一個全局變量Dep.target，其實是給主題類Dep定義了一個靜態屬性target，可以直接使用Dep.target訪問這個靜態屬性。然后給類定義共有屬性name（vue實例中的訪問器屬性名“text”），node（html標簽，如<input>，{{text}}），vm（當前vue實例），nodeType（html標簽類型），其次執行update方法，進而執行了原型對象上的get方法，get方法中的this.vm[this.name]讀取了vm中的訪問器屬性，從而觸發了訪問器屬性的get方法，get方法中將wathcer添加到對應訪問器屬性的dep中，同時將屬性值賦給臨時變量value。再者，獲取屬性的值（保存在臨時變量value中），然后更新視圖。最后將Dep.target設為空。因為它是全局變量，也是watcher與dep關聯的唯一橋梁，任何時刻都必須保證Dep.target只有一個值。
3. 在編譯方法compile中，劫持子節點的時候，在節點上定義一個觀察者對象Watcher
4. defineReactive方法中，定義訪問器屬性的時候，在存取描述符get中，如果主題對象類的靜態屬性target有值， 此時Watcher方法被調用，給主題對象添加訂閱者。

data中的數據重新定義為訪問器屬性，get中將當前數據對應的節點添加到主題對象中，set方法中通知數據對應的節點更新。編譯過程將data數據生成數據節點，並生成一個觀察者來觀察節點變化。

4. 總結

介紹了這么多，最后vue的原理總結如下。vue功能遠不止這些，要深入了解，需要研究源代碼，待后續博客。

1. 給Vue定義data選項；
2. 使用Object.defineProperty將data選項中的屬性轉化成getter，setter屬性；
3. getter將觀察者添加到主題對象中，收集依賴；
4. setter中通知變更，給dom元素賦值；
5. 編譯，將el節點及子節點編譯到render函數；
6. 編譯，觸發getter，將當前節點對應的data屬性添加到主題中；
7. 編譯，監聽input節點的change事件，修改當前節點對應的data屬性值，觸發setter，通知變更，更新dom節點值，反饋給用戶；

本文介紹了vue.js的簡單實現以及相關的知識，包含MVC，MVP，MVVM的原理，對象的訪問器屬性，html的文檔片段（DocumentFragment），觀察者模式。vue.js的實現主要介紹數據編譯（compile），通過文檔片段實現數據劫持掛載，通過觀察者模式（訂閱發布模式）的實現數據雙向綁定等內容。

參考：

https://www.cnblogs.com/icebutterfly/p/7977033.html
http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
https://www.cnblogs.com/kidney/p/6052935.html?utm_source=gold_browser_extension#!comments