vue中wath的源碼實現

前言

閱讀本節，須要理解vue的數據驅動原理。

看這樣一段代碼

new Vue({
    data: {
        msg: 'hello',
        say: 'hello world',
    },
    watch: {
        msg(newVal) {
            this.say = newVal + ' world';
        }
    }
})

vue的data包括2個屬性msg和say，watch中監聽msg並更新say的值。

源碼實現

1. new Vue

function Vue (options) {
  if ("development" !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword');
  }
  this._init(options);
}

new Vue會執行原型上的_init方法， _init方法中hi調用 initState，這個方法會初始化全部狀態相關內容

2. initWatch

initStatus會判斷若是咱們定義了watch則執行initWatch

function initWatch (vm, watch) {
  for (var key in watch) {
    var handler = watch[key];
    if (Array.isArray(handler)) {
      for (var i = 0; i < handler.length; i++) {
        createWatcher(vm, key, handler[i]);
      }
    } else {
　　
      createWatcher(vm, key, handler);
    }
  }
}

這段代碼意思是若是watch聲明瞭一個數組，則遍歷數組並調用createWatcher，若是不是數組就直接調用createWatcher傳遞過去。這就證實，watch咱們能夠聲明多個處理函數。

3. createWatcher

createWatcher主要工做是處理傳入值，傳入不一樣的值，作不一樣的兼容處理

function createWatcher (
  vm,
  expOrFn,
  handler,
  options
) {
 // 若是handler是對象，則獲取handler下面的handler屬性看成watch的執行函數
  if (isPlainObject(handler)) {
    options = handler;
    handler = handler.handler;
  }
// 若是handler是字符串，則獲取vue原型上的方法
  if (typeof handler === 'string') {
    handler = vm[handler];
  }
// 調用vue原型上的$watch
  return vm.$watch(expOrFn, handler, options)
}

經過以上咱們能夠看出，watch定義有不少種類型，好比：

new Vue({
    watch: {
       // 字符串
        test1: 'handleTest',
        // 對象
        test2: {
            handler(newVal) {
                // ....
            }
        }
    },
    methods: {
        handleTest(newVal) {
            // ...
        }
    }
})

4. 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;
    // new 一個Watcher實例
    var watcher = new Watcher(vm, expOrFn, cb, options);
    if (options.immediate) {
        cb.call(vm, watcher.value);
    }
    return function unwatchFn() {
        watcher.teardown();
    }
};

經過以上代碼能夠看出，watch的建立最終實際上是vue內部建立了一個Watcher實例。那麼Watcher是vue中很重要的一部分，它是數據驅動不可缺乏的一部分。

接下來大概講一下new Watcher的功能是什麼樣的。

5. new Watcher

vue在拿到了要監聽的屬性和屬性更新執行的函數後，new Watcher建立一個Watcher。

Watcher是訂閱者，它「監聽更新行爲」並執行更新函數。

爲何雙引號？其實不是它在監聽。以最初的代碼爲例更新步驟以下：

1. vue內部new Watcher建立一個Watcher實例

2. Watcher實例建立時會將本身添加到data.msg的Observer中（數據驅動原理知識）

3. 當咱們改變msg值時，msg Observer會通知全部被觀察者，其中就包括以上Watcher。（數據驅動原理知識）

4. Watcher觸發更新而且執行回調，所以執行了咱們聲明的函數。

完結

watch的實現很簡單，這裏須要vue的數據驅動原理，由Object.defileProperty、Dep、Watcher幾部分實現。不瞭解的能夠先去學習這部份內容。