vue原理之雙向綁定虛

vue 雙向綁定的原理：數據劫持結合發佈者-訂閱者模式

舉例說明：

在vue中建立數據對象

    var vm = new Vue({
        data: {
            obj: {
                test: 1
            }
        },
        created: function () {
            console.log(this.obj);
        }
    });

結果：

　　Object {

　　　　test: 1

　　　　_ob_: Observer

　　　　get test: function reactiveGetter()

　　　　set test: function reactiveSetter(newVal)

　　　　_proto_: Object

　　}

咱們會發現其中多了些東西好比說get和set，那麼他們是what？

vue經過object.defineProperty這個函數來進行數據劫持，這個函數能夠控制一個對象的一些屬性，讀寫啊之類的       

例如

　  let Obj = {};

      let pro = '';

　   Object.defineProperty(Obj, 'pro', {

          set(value) {

              pro = value

　　　　console.log('變量值設定爲‘ + value)

          }，

          get(value) {

              return ’獲取到的變量值爲：‘ +  pro

          }

      })

     Obj.pro = 'vue';  // 變量值設定爲vue
     console.log(Obj.pro);  //獲取到的變量值爲vue

     在設置Obj.pro的值時會觸發set函數，在讀取Obj.pro的值時會觸發get函數

雙向綁定：視圖變化時更新數據，能夠使用事件監聽，好比input事件啊，click事件啊等

                  數據變化時更新視圖，使用Object.defineProperty中定義的set函數，數據變化時執行set函數，在數據雙向綁定時先對數據進行劫持監聽，因此有一個Observe監聽器，監聽           數據的全部屬性，屬性變化時告訴訂閱者Watcher看是否須要更新，由於訂閱者是多個，因此須要消息訂閱器Dep來收集訂閱者，而後在監聽器Observer和訂閱者Watcher之間進           行統一管理，接着，咱們還須要有一個指令解析器Compile，對每一個節點元素進行掃描和解析，將相關指令對應初始化成一個訂閱者Watcher，並替換模板數據或者綁定相應的函           數，此時當訂閱者Watcher接收到相應屬性的變化，就會執行對應的更新函數，從而更新視圖。所以接下去咱們執行如下3個步驟，實現數據的雙向綁定

       　　　1.實現一個監聽器Observer，用來劫持並監聽全部屬性，若是有變更的，就通知訂閱者。

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

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