Vue 初始化的过程-调试

前面已经介绍了初始化过程中给 Vue 实例添加静态成员以及实例成员的过程，下面用调试的方式统筹整个流程。

主要调试的文件有四个，分别是前面说过的四个导出 Vue 的文件。

• 跟平台无关的两个导出 Vue 的文件

  • src/core/instance/index.js
  • src/core/index.js

• 跟平台相关的两个导出 Vue 的文件

  • src/platforms/web/runtime/index.js
  • src/platforms/web/entry-runtime-with-compiler.js

开始调试

1. 进入的第一个文件是 src/core/instance/index.js

这个是 Vue 开始初始化的地方，在右侧的 Watch 中添加 Vue 来追踪，Vue 的变化，可以看到，一开始的 Vue 上面挂载的都是一些默认的成员。

通过点击 F10 查看 Vue 在这个文件中的变化过程。

• 执行 initMixin(Vue) 在 Vue 原型上挂载 _init() 方法。
• 执行 stateMixin(Vue) 在 Vue 原型上挂载 $data $props $set $delete $watch 这几个成员
• 执行 eventsMixin(Vue) 在 Vue 原型上挂载跟事件相关的四个方法，$on $once $off $emit
• 执行 lifecycleMixin(Vue) 在 Vue 原型上挂载了生命周期相关的方法，_update $forceUpdate $destroy
  • _update() 方法内部调用了 patch() 方法，将虚拟 DOM 转换成真实 DOM。
• 执行 renderMixin(Vue) 在 Vue 原型上挂载一些下划线开头的一些方法，还注册了 $nextTick _render 。
  • 下划线开头的方法的作用是当把模板转换成 render 函数的时候在 render 函数中调用这些方法。
  • _render 函数的作用是调用用户传过来的 render 函数，或者把模板转换成的 render 函数。

2. 进入的第二个文件是 src/core/index.js

在这个文件中调用了 initGlobalAPI() 方法初始化了 Vue 的静态成员。

通过点击 F11 进入到这个函数，查看 Vue 静态成员的挂载过程。

• 1. 挂载 config 属性，在这个属性里面初始化了很多跟平台相关的方法。
• 2. 挂载 util 属性，在这个成员中挂载了一些通用的方法，但是不建议我们直接使用，会带来不确定的风险。
• 3. 挂载 set delete nextTick 方法
• 4. 挂载 observable 方法
• 5. 挂载 options 对象
  • 这个对象里面有三个成员 components filters directives 分别存储全局的组件、过滤器、指令。
• 6. 挂载 _base 属性，这个属性存储的就是 Vue 的构造函数
• 7. 挂载了第一个全局组件 keep-alive
• 8. 最后调用一些 init 函数给 Vue 的构造函数注册静态方法

3. 进入到的第三个文件是 src/platforms/web/runtime/index.js

• 1. 首先在 Vue.config 中注册了一些跟平台相关的方法
• 2. 注册跟平台相关的指令和组件
  • KeepAlive
  • Transition
  • TransitionGroup
  • v-model
  • v-show
• 3. 在原型上注册 patch 方法
• 4. 在原型上注册 $mount 方法

4. 进入到的第四个文件是 src/platforms/web/entry-runtime-with-compiler.js

• 首先重写了上个文件在 Vue 原型上注册的 $mount 方法，在 $mount 中新增了把模板转换成 render 函数的功能。
• 最后还给 Vue 挂载了一个 compile 方法，用于手动的把模板转换成 render 函数。