3.2 实例挂载的基本思路

有了上面的基础，我们回头看初始化_init的代码，在代码中我们观察到initProxy后有一系列的函数调用，这些函数包括了创建组件关联，初始化事件处理，定义渲染函数，构建数据响应式系统等，最后还有一段代码,在el存在的情况下，实例会调用$mount进行实例挂载。

  1. Vue.prototype._init = function (options) {
  2.   ···
  3.   // 选项合并
  4.   vm.$options = mergeOptions(
  5.     resolveConstructorOptions(vm.constructor),
  6.     options || {},
  7.     vm
  8.   );
  9.   // 数据代理
  10.   initProxy(vm);
  11.   vm._self = vm;
  12.   initLifecycle(vm);
  13.   // 初始化事件处理
  14.   initEvents(vm);
  15.   // 定义渲染函数
  16.   initRender(vm);
  17.   // 构建响应式系统
  18.   initState(vm);
  19.   // 等等
  20.   ···
  21.   if (vm.$options.el) {
  22.     vm.$mount(vm.$options.el);
  23.   }
  24. }

以手写template模板为例，理清楚什么是挂载。我们会在选项中传递template为属性的模板字符串，如<div>{{message}}</div>，最终这个模板字符串通过中间过程将其转成真实的DOM节点，并挂载到选项中el代表的根节点上完成视图渲染。这个中间过程就是接下来要分析的挂载流程。

Vue挂载的流程是比较复杂的，接下来我将通过流程图，代码分析两种方式为大家展示挂载的真实过程。

3.2.1 流程图

3.2 实例挂载的基本思路 - 图1如果用一句话概括挂载的过程，可以描述为确认挂载节点,编译模板为render函数，渲染函数转换Virtual DOM,创建真实节点。

3.2.2 代码分析

接下来我们从代码的角度去剖析挂载的流程。挂载的代码较多，下面只提取骨架相关的部分代码。

  1. // 内部真正实现挂载的方法
  2. Vue.prototype.$mount = function (el, hydrating) {
  3.   el = el && inBrowser ? query(el) : undefined;
  4.   // 调用mountComponent方法挂载
  5.   return mountComponent(this, el, hydrating)
  6. };
  7. // 缓存了原型上的 $mount 方法
  8. var mount = Vue.prototype.$mount;
  10. // 重新定义$mount,为包含编译器和不包含编译器的版本提供不同封装，最终调用的是缓存原型上的$mount方法
  11. Vue.prototype.$mount = function (el, hydrating) {
  12.   // 获取挂载元素
  13.   el = el && query(el);
  14.   // 挂载元素不能为跟节点
  15.   if (el === document.body || el === document.documentElement) {
  16.     warn(
  17.       "Do not mount Vue to <html> or <body> - mount to normal elements instead."
  18.     );
  19.     return this
  20.   }
  21.   var options = this.$options;
  22.   // 需要编译 or 不需要编译
  23.   // render选项不存在，代表是template模板的形式，此时需要进行模板的编译过程
  24.   if (!options.render) {
  25.     ···
  26.     // 使用内部编译器编译模板
  27.   }
  28.   // 无论是template模板还是手写render函数最终调用缓存的$mount方法
  29.   return mount.call(this, el, hydrating)
  30. }
  31. // mountComponent方法思路
  32. function mountComponent(vm, el, hydrating) {
  33.   // 定义updateComponent方法，在watch回调时调用。
  34.   updateComponent = function () {
  35.     // render函数渲染成虚拟DOM， 虚拟DOM渲染成真实的DOM
  36.     vm._update(vm._render(), hydrating);
  37.   };
  38.   // 实例化渲染watcher
  39.   new Watcher(vm, updateComponent, noop, {})
  40. }

我们用语言描述挂载流程的基本思路。

  • 确定挂载的DOM元素,这个DOM需要保证不能为html，body这类跟节点。
  • 我们知道渲染有两种方式，一种是通过template模板字符串，另一种是手写render函数，前面提到template模板需要运行时进行编译，而后一个可以直接用render选项作为渲染函数。因此挂载阶段会有两条分支，template模板会先经过模板的解析，最终编译成render渲染函数参与实例挂载，而手写render函数可以绕过编译阶段，直接调用挂载的$mount方法。
  • 针对template而言，它会利用Vue内部的编译器进行模板的编译，字符串模板会转换为抽象的语法树，即AST树，并最终转化为一个类似function(){with(){}}的渲染函数，这是我们后面讨论的重点。
  • 无论是template模板还是手写render函数，最终都将进入mountComponent过程,这个阶段会实例化一个渲染watcher,具体watcher的内容，另外放章节讨论。我们先知道一个结论，渲染watcher的回调函数有两个执行时机，一个是在初始化时执行，另一个是当vm实例检测到数据发生变化时会再次执行回调函数。
  • 回调函数是执行updateComponent的过程，这个方法有两个阶段，一个是vm._render,另一个是vm._update。 vm._render会执行前面生成的render渲染函数，并生成一个Virtual Dom tree,而vm._update会将这个Virtual Dom tree转化为真实的DOM节点。