var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // string method name
    b: 'someMethod',
    // the callback will be called whenever any of the watched object properties change regardless of their nested depth
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // the callback will be called immediately after the start of the observation
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // you can pass array of callbacks, they will be called one-by-one
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

// src/state.js
function initState (vm) {
  const options = vm.$options;
  if (options.watch) {
    initWatch(vm);
  }
}

// src/state.js
function initWatch (vm) {
  const { watch } = vm.$options;
  for (const key in watch) {
    if (watch.hasOwnProperty(key)) {
      const userDefine = watch[key];
      if (Array.isArray(userDefine)) { // userDefine是數(shù)組，為數(shù)組中的每一項分別創(chuàng)建一個watcher
        userDefine.forEach(item => {
          createWatcher(vm, key, item);
        });
      } else {
        createWatcher(vm, key, userDefine);
      }
    }
  }
}

function createWatcher (vm, key, userDefine) {
  let handler;
  if (typeof userDefine === 'string') { // 字符串,從實例上取到對應(yīng)的method
    handler = vm[userDefine];
    userDefine = {};
  } else if (typeof userDefine === 'function') { // 函數(shù)
    handler = userDefine;
    userDefine = {};
  } else { // 對象，userDefine中可能會包含用戶傳入的deep,immediate屬性
    handler = userDefine.handler;
    delete userDefine.handler;
  }
  // 用處理好的參數(shù)調(diào)用vm.$watch
  vm.$watch(key, handler, userDefine);
}

export function stateMixin (Vue) {
  // some code ...
  Vue.prototype.$watch = function (exprOrFn, cb, options) {
    const vm = this;
    const watch = new Watcher(vm, exprOrFn, cb, { ...options, user: true });
  };
}

class Watcher {
  constructor (vm, exprOrFn, cb, options = {}) {
    this.user = options.user;
    if (typeof exprOrFn === 'function') {
      this.getter = this.exprOrFn;
    }
    if (typeof exprOrFn === 'string') { // 如果exprFn傳入的是字符串，會從實例vm上進行取值
      this.getter = function () {
        const keys = exprOrFn.split('.');
        // 后一次拿到前一次的返回值，然后繼續(xù)進行操作
        // 在取值時，會收集當前Dep.target對應(yīng)的`watcher`，這里對應(yīng)的是`watch`屬性對應(yīng)的`watcher`
        return keys.reduce((memo, cur) => memo[cur], vm);
      };
    }
    this.value = this.get();
  }

  get () {
    pushTarget(this);
    const value = this.getter();
    popTarget();
    return value;
  }

  // some code ...  
}

class Watcher {

  // some code ...
  update () {
    queueWatcher(this);
  }

  run () {
    const value = this.get();
    if (this.user) {
      this.cb.call(this.vm, value, this.value);
      this.value = value;
    }
  }
}

Vue.prototype.$watch = function (exprOrFn, cb, options) {
  const vm = this;
  const watcher = new Watcher(vm, exprOrFn, cb, { ...options, user: true });
  if (options.immediate) { // 在初始化后立即執(zhí)行watch
    cb.call(vm, watcher.value);
  }
};

class Watcher {
  // some code ...
  get () {
    pushTarget(this);
    const value = this.getter();
    if (this.deep) { // 繼續(xù)遍歷value中的每一項，觸發(fā)它的get方法，收集當前的watcher
      traverse(value);
    }
    popTarget();
    return value;
  }
}

// traverse.js
// 創(chuàng)建一個Set，遍歷之后就會將其放入，當遇到環(huán)引用的時候不會行成死循環(huán)
const seenObjects = new Set();

export function traverse (value) {
  _traverse(value, seenObjects);
  // 遍歷完成后，清空Set
  seenObjects.clear();
}

function _traverse (value, seen) {
  const isArr = Array.isArray(value);
  const ob = value.__ob__;
  // 不是對象并且沒有被觀測過的話，終止調(diào)用
  if (!isObject(value) || !ob) {
    return;
  }
  if (ob) {
    // 每個屬性只會有一個在Observer中定義的dep
    const id = ob.dep.id;
    if (seen.has(id)) { // 遍歷過的對象和數(shù)組不再遍歷，防止環(huán)結(jié)構(gòu)造成死循環(huán)
      return;
    }
    seen.add(id);
  }
  if (isArr) {
    value.forEach(item => {
      // 繼續(xù)遍歷數(shù)組中的每一項，如果為對象的話，會繼續(xù)遍歷數(shù)組的每一個屬性，即對對象屬性執(zhí)行取值操作，收集watch watcher
      _traverse(item, seen);
    });
  } else {
    const keys = Object.keys(value);
    for (let i = 0; i < keys.length; i++) {
      // 繼續(xù)執(zhí)行_traverse，這里會對 對象 中的屬性進行取值
      _traverse(value[keys[i]], seen);
    }
  }
}