快捷導(dǎo)航

Vue之Watcher源碼解析（1）

更新時(shí)間：2017年07月19日 11:47:37 作者：

這篇文章主要為大家詳細(xì)介紹了Vue源碼之Watcher的基礎(chǔ)知識(shí)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

上一節(jié)最后再次調(diào)用了mount函數(shù)，我發(fā)現(xiàn)竟然跳到了7000多行的那個(gè)函數(shù)，之前我還說(shuō)因?yàn)槁暶髟缌吮桓采w，看來(lái)我錯(cuò)了！

就是這個(gè)函數(shù)：

// Line-7531
  Vue$3.prototype.$mount = function(el, hydrating) {
    el = el && inBrowser ? query(el) : undefined;
    return mountComponent(this, el, hydrating)
  };

第一步query就不用看了，el此時(shí)是一個(gè)DOM節(jié)點(diǎn)，所以直接返回，然后調(diào)用了mountComponent函數(shù)。

// Line-2375
  function mountComponent(vm, el, hydrating) {
    vm.$el = el;
    /* 檢測(cè)vm.$options.render */

    // 調(diào)用鉤子函數(shù)
    callHook(vm, 'beforeMount');

    var updateComponent;
    /* istanbul ignore if */
    if ("development" !== 'production' && config.performance && mark) {
      /* 標(biāo)記vue-perf */
    } else {
      updateComponent = function() {
        vm._update(vm._render(), hydrating);
      };
    }

    // 生成中間件watcher
    vm._watcher = new Watcher(vm, updateComponent, noop);
    hydrating = false;

    // 調(diào)用最后一個(gè)鉤子函數(shù)
    if (vm.$vnode == null) {
      vm._isMounted = true;
      callHook(vm, 'mounted');
    }
    return vm
  }

這個(gè)函數(shù)做了三件事，調(diào)用beforeMount鉤子函數(shù)，生成Watcher對(duì)象，接著調(diào)用mounted鉤子函數(shù)。

數(shù)據(jù)雙綁、AST對(duì)象處理完后，這里的Watcher對(duì)象負(fù)責(zé)將兩者聯(lián)系到一起，上一張網(wǎng)上的圖片：

可以看到，之前以前把所有的組件都過(guò)了一遍，目前就剩一個(gè)Watcher了。

構(gòu)造新的Watcher對(duì)象傳了3個(gè)參數(shù)，當(dāng)前vue實(shí)例、updateComponent函數(shù)、空函數(shù)。

// Line-2697
  var Watcher = function Watcher(vm, expOrFn, cb, options) {
    this.vm = vm;
    // 當(dāng)前Watcher添加到vue實(shí)例上
    vm._watchers.push(this);
    // 參數(shù)配置 默認(rèn)為false
    if (options) {
      this.deep = !!options.deep;
      this.user = !!options.user;
      this.lazy = !!options.lazy;
      this.sync = !!options.sync;
    } else {
      this.deep = this.user = this.lazy = this.sync = false;
    }
    this.cb = cb;
    this.id = ++uid$2;
    this.active = true;
    this.dirty = this.lazy; // for lazy watchers
    this.deps = [];
    this.newDeps = [];
    // 內(nèi)容不可重復(fù)的數(shù)組對(duì)象
    this.depIds = new _Set();
    this.newDepIds = new _Set();
    // 把函數(shù)變成字符串形式`
    this.expression = expOrFn.toString();
    // parse expression for getter
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn;
    } else {
      this.getter = parsePath(expOrFn);
      if (!this.getter) {
        this.getter = function() {};
        "development" !== 'production' && warn(
          "Failed watching path: \"" + expOrFn + "\" " +
          'Watcher only accepts simple dot-delimited paths. ' +
          'For full control, use a function instead.',
          vm
        );
      }
    }
    // 不是懶加載類型調(diào)用get
    this.value = this.lazy ?
      undefined :
      this.get();
  };

該構(gòu)造函數(shù)添加了一堆屬性，第二個(gè)參數(shù)由于是函數(shù)，直接作為getter屬性加到watcher上，將字符串后則作為expression屬性。

最后有一個(gè)value屬性，由于lazy為false，調(diào)用原型函數(shù)gei進(jìn)行賦值：

// Line-2746
  Watcher.prototype.get = function get() {
    pushTarget(this);
    var value;
    var vm = this.vm;
    if (this.user) {
      try {
        value = this.getter.call(vm, vm);
      } catch (e) {
        handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));
      }
    } else {
      // 調(diào)用之前的updateComponent
      value = this.getter.call(vm, vm);
    }
    // "touch" every property so they are all tracked as
    // dependencies for deep watching
    if (this.deep) {
      traverse(value);
    }
    popTarget();
    this.cleanupDeps();
    return value
  };

  // Line-750
  Dep.target = null;
  var targetStack = [];

  function pushTarget(_target) {
    // 默認(rèn)為null 
    if (Dep.target) {
      targetStack.push(Dep.target);
    }
    // 依賴目前標(biāo)記為當(dāng)前watcher
    Dep.target = _target;
  }

  function popTarget() {
    Dep.target = targetStack.pop();
  }

原型方法get中，先設(shè)置了依賴收集數(shù)組Dep的target值，user屬性暫時(shí)不清楚意思，跳到了else分支，調(diào)用了getter函數(shù)。而getter就是之前的updateComponent函數(shù)：

// Line-2422
  updateComponent = function() {
    vm._update(vm._render(), hydrating);
  };

這個(gè)函數(shù)不接受參數(shù)，所以說(shuō)傳進(jìn)來(lái)的兩個(gè)vm并沒(méi)有什么卵用，調(diào)用這個(gè)函數(shù)會(huì)接著調(diào)用_update函數(shù)，這個(gè)是掛載到vue原型的方法：

// Line-2422
  Vue.prototype._render = function() {
    var vm = this;
    var ref = vm.$options;
    var render = ref.render;
    var staticRenderFns = ref.staticRenderFns;
    var _parentVnode = ref._parentVnode;
    // 檢測(cè)是否已掛載
    if (vm._isMounted) {
      // clone slot nodes on re-renders
      for (var key in vm.$slots) {
        vm.$slots[key] = cloneVNodes(vm.$slots[key]);
      }
    }
    // 都沒(méi)有
    vm.$scopedSlots = (_parentVnode && _parentVnode.data.scopedSlots) || emptyObject;
    if (staticRenderFns && !vm._staticTrees) {
      vm._staticTrees = [];
    }
    vm.$vnode = _parentVnode;
    // render self
    var vnode;
    try {
      // 調(diào)用之前的render字符串函數(shù)
      vnode = render.call(vm._renderProxy, vm.$createElement);
    } catch (e) {
      /* handler error */
    }
    // return empty vnode in case the render function errored out
    if (!(vnode instanceof VNode)) {
      /* 報(bào)錯(cuò) */
      vnode = createEmptyVNode();
    }
    // set parent
    vnode.parent = _parentVnode;
    return vnode
  };

方法獲取了一些vue實(shí)例的參數(shù)，比較重點(diǎn)的是render函數(shù)，調(diào)用了之前字符串后的ast對(duì)象：