Vue之Watcher源码解析（2）

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.
};

由于是初次渲染，所以会进入第一个条件分支，并调用__patch__函数，传入原生DOM节点、虚拟DOM、false三个参数。

__patch__在加载框架时候已经注入了，见代码：

  // 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为属性、指令等相关方法。

这个createPatchFunction函数的构造相当于一个模块，里面包含大量的方法，但是最后不是返回一个对象包含内部方法的引用，而是返回一个函数，形式大概如下：

 // line-4762
  function createPatchFunction() {
    // fn1...
    // fn2...
    return function patch() {
      // 调用内部方法fn1,fn2...
    }
  }

方法比较多，下次再讲，边跑流程边看。