Vue雙向榜單的原理

大家都知道Vue采用的是MVVM的設計模式,采用數據驅動實現雙向綁定，不明白雙向綁定原理的需要先補充雙向綁定的知識,在watch的處理中將運用到Vue的雙向榜單原理，所以再次回顧一下：

Vue的數據通過Object.defineProperty設置對象的get和set實現對象屬性的獲取，vue的data下的數據對應唯一 一個dep對象，dep對象會存儲改屬性對應的watcher，在獲取數據（get）的時候為相關屬性添加具有對應處理函數的watcher，在設置屬性的時候，觸發def對象下watcher執行相關的邏輯

// 為data的的所有屬性添加getter 和 setterfunction defineReactive( obj,key,val,customSetter,shallow) {  //  var dep = new Dep();  /*....省略部分....*/  var childOb = !shallow && observe(val); //為對象添加備份依賴dep  Object.defineProperty(obj, key, {    enumerable: true,    configurable: true,    get: function reactiveGetter() {      var value = getter ? getter.call(obj) : val;      if (Dep.target) {        dep.depend(); //         if (childOb) {          childOb.dep.depend(); //依賴dep 添加watcher 用于set ,array改變等使用          if (Array.isArray(value)) {            dependArray(value);          }        }      }      return value    },    set: function reactiveSetter(newVal) {      var value = getter ? getter.call(obj) : val;      /* eslint-disable no-self-compare */      if (newVal === value || (newVal !== newVal && value !== value)) {        return      }      /* eslint-enable no-self-compare */      if ("development" !== 'production' && customSetter) {        customSetter();      }      if (setter) {        setter.call(obj, newVal);      } else {        val = newVal;      }      childOb = !shallow && observe(newVal);      dep.notify();//有改變觸發watcher進行更新    }  });} 

在vue進行實例化的時候，將調用 initWatch(vm, opts.watch);進行初始化watch的初始化，該函數最終將調用 vm.$watch(expOrFn, handler, options) 進行watch的配置，下面我們將講解 vm.$watch方法

Vue.prototype.$watch = function (      expOrFn,      cb,      options    ) {      var vm = this;      if (isPlainObject(cb)) {        return createWatcher(vm, expOrFn, cb, options)      }      options = options || {};      options.user = true;      //為需要觀察的 expOrFn 添加watcher ，expOrFn的值有改變時執行cb，      //在watcher的實例化的過程中會對expOrFn進行解析，并為expOrFn涉及到的data數據下的def添加該watcher      var watcher = new Watcher(vm, expOrFn, cb, options);      //immediate==true 立即執行watch handler      if (options.immediate) {         cb.call(vm, watcher.value);      }      //取消觀察函數      return function unwatchFn() {        watcher.teardown();      }    };

來看看實例化watcher的過程中（只分享是觀察函數中的實例的watcher）