vue源码解读(二)-virtual dom中的组件节点的用途

1、模板编译成render函数，render函数生成vdom

__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; });
var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    { attrs: { id: "container" } },
    [
      _c("h1", [_vm._v("vue 的生命周期" + _vm._s(_vm.message))]),
      _vm._v(" "),
      _c("button", { on: { click: _vm.handleTogglePage } }, [
        _vm._v("切换page")
      ]),
      _vm._v(" "),
      _c("Page", { attrs: { title: _vm.title } })
    ],
    1
  )
}
var staticRenderFns = []
render._withStripped = true

拿到vnode会执行vm._update()->vm.patch->patch
path里会会执行createElm->createComponent->createComponentInstanceForVnode(), 根据vnode的组件节点上的构造器，实例化子组件，从而走到子组件的生命周期，子组件实例化完成，也会调用$mount(),又走到updateComponent,生成对应的wather对象，然后到子组件的render（vm._update(vm._render)），又到patch,执行createElem, 遇到“组件节点”，再次执行上面的逻辑。

function createComponentInstanceForVnode (
  vnode, // we know it's MountedComponentVNode but flow doesn't
  parent // activeInstance in lifecycle state
) {
  var options = {
    _isComponent: true,
    _parentVnode: vnode,
    parent: parent
  };
  // check inline-template render functions
  var inlineTemplate = vnode.data.inlineTemplate;
  if (isDef(inlineTemplate)) {
    options.render = inlineTemplate.render;
    options.staticRenderFns = inlineTemplate.staticRenderFns;
  }
  return new vnode.componentOptions.Ctor(options)
}