快捷導(dǎo)航

Vue之Watcher源碼解析（2）

更新時(shí)間：2017年07月19日 11:35:58 作者：QH-Jimmy

這篇文章主要為大家詳細(xì)介紹了Vue源碼之Watcher的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

接著上節(jié)Vue Watcher源碼的話，繼續(xù)探討，目前是這么個(gè)過程：

函數(shù)大概是這里：

// line-3846
  Vue.prototype._render = function() {

    // 獲取參數(shù)

    try {
      // 死在這兒
      vnode = render.call(vm._renderProxy, vm.$createElement);
    } catch (e) {
      // 報(bào)render錯(cuò)誤
    }
    // return empty vnode in case the render function errored out
    if (!(vnode instanceof VNode)) {
      // 返回空節(jié)點(diǎn)
    }
    // set parent
    vnode.parent = _parentVnode;
    return vnode
  };

然后，在上個(gè)月，我卡死在了render.call這個(gè)函數(shù)上面，因?yàn)樗衯ue實(shí)例被設(shè)置了proxy代理，所以會(huì)跳轉(zhuǎn)到各種奇怪的檢測(cè)函數(shù)中。

過了一個(gè)月，我依然看不懂，一點(diǎn)都不想講，所以先跳過，直接看后面！

這里假設(shè)vnode已經(jīng)返回了，來看看是個(gè)啥：

這是一個(gè)虛擬節(jié)點(diǎn)，由之前字符串化后的DOM樹生成，主要包含子節(jié)點(diǎn)、上下文、屬性、文本、標(biāo)簽名、類型等屬性，這些可以直接從鍵名判斷。

得到vnode后，由于這里是根節(jié)點(diǎn)，所以不存在_parentVnode，直接返回。

然后到了mountComponent函數(shù)：

// line-2374
  function mountComponent(vm, el, hydrating) {
    vm.$el = el;
    // error
    callHook(vm, 'beforeMount');

    var updateComponent;
    /* istanbul ignore if */
    if ("development" !== 'production' && config.performance && mark) {
      updateComponent = function() {
        // 開發(fā)者模式下的處理方式
      };
    } else {
      // 重新進(jìn)入這里
      updateComponent = function() {
        vm._update(vm._render(), hydrating);
      };
    }

    vm._watcher = new Watcher(vm, updateComponent, noop);
    hydrating = false;

    // manually mounted instance, call mounted on self
    // mounted is called for render-created child components in its inserted hook
    if (vm.$vnode == null) {
      vm._isMounted = true;
      callHook(vm, 'mounted');
    }
    return vm
  }

這樣，就帶著返回的vode進(jìn)入了_update函數(shù)，開始正式渲染頁面。

函數(shù)如下：

// line-2374
  Vue.prototype._update = function(vnode, hydrating) {
    var vm = this;
    if (vm._isMounted) {
      callHook(vm, 'beforeUpdate');
    }
    // 保存原屬性
    var prevEl = vm.$el;
    var prevVnode = vm._vnode;
    var prevActiveInstance = activeInstance;
    activeInstance = vm;
    vm._vnode = vnode;
    // patch
    if (!prevVnode) {
      // 初始化渲染
      vm.$el = vm.__patch__(
        vm.$el, vnode, hydrating, false /* removeOnly */ ,
        vm.$options._parentElm,
        vm.$options._refElm
      );
    } else {
      // 更新
      vm.$el = vm.__patch__(prevVnode, vnode);
    }
    activeInstance = prevActiveInstance;
    // update __vue__ reference
    if (prevEl) {
      prevEl.__vue__ = null;
    }
    if (vm.$el) {
      vm.$el.__vue__ = vm;
    }
    // if parent is an HOC, update its $el as well
    // HOC => High Order Component => 高階組件
    if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
      vm.$parent.$el = vm.$el;
    }
    // updated hook is called by the scheduler to ensure that children are
    // updated in a parent's updated hook.
  };

由于是初次渲染，所以會(huì)進(jìn)入第一個(gè)條件分支，并調(diào)用__patch__函數(shù)，傳入原生DOM節(jié)點(diǎn)、虛擬DOM、false三個(gè)參數(shù)。

__patch__在加載框架時(shí)候已經(jīng)注入了，見代碼：

  // line-7526
  // install platform patch function
  Vue$3.prototype.__patch__ = inBrowser ? patch : noop;

  // line-6968
  var patch = createPatchFunction({
    nodeOps: nodeOps,
    modules: modules
  });

這里，nodeOps為封裝的DOM操作操作方法，modules為屬性、指令等相關(guān)方法。

這個(gè)createPatchFunction函數(shù)的構(gòu)造相當(dāng)于一個(gè)模塊，里面包含大量的方法，但是最后不是返回一個(gè)對(duì)象包含內(nèi)部方法的引用，而是返回一個(gè)函數(shù)，形式大概如下：

 // line-4762
  function createPatchFunction() {
    // fn1...
    // fn2...
    return function patch() {
      // 調(diào)用內(nèi)部方法fn1,fn2...
    }
  }

方法比較多，下次再講，邊跑流程邊看。