详解Vue构造函数的创建过程

写在前面

上一篇文章 《一口气看完Vue源码》 中对大体流程做了个分析，但由于过程太过冗长导致文件零散，所以可能还不了解 Vue构造函数 中的某些值是哪儿来的。这一章节主要讲的是 Vue构造函数 的创建，会从生成到添加属性完毕的顺序依次介绍每个文件中对 Vue构造函数 的操作。

core/instance/index.js

• 创建 Vue 的构造函数

Vue = {
   }

core/instance/init.js

• 给 Vue 的原型上添加 _init 方法

Vue = {
   
  prototype: {
   
    /* new add start */
    _init() {
   }
    /* new add end */
  }
}

core/instance/state.js

• 给 Vue 的原型上添加 $data ( 获取 options._data )
• 给 Vue 的原型上添加 $props ( 获取 options._props )
• 给 Vue 的原型上添加 $set 方法 ( 解决对象和数组在设置新内容时无法触发依赖的问题 )
• 给 Vue 的原型上添加 $del 方法 ( 解决对象在删除时无法触发依赖的问题 )
• 给 Vue 的原型上添加 $watch 方法

Vue = {
   
  prototype: {
   
    _init() {
   },
    /* new add start */
    $data: {
   },
    $props: {
   },
    $set() {
   },
    $del() {
   },
    $watch() {
   },
    /* new add end */
  }
}

core/instance/events.js

• 给 Vue 的原型上添加 $on 方法 ( 发布订阅 - 订阅事件 )
• 给 Vue 的原型上添加 $once 方法 ( 发布订阅 - 订阅一次性事件 )
• 给 Vue 的原型上添加 $off 方法 ( 发布订阅 - 取消事件 )
• 给 Vue 的原型上添加 $emit 方法 ( 发布订阅 - 发布事件 )

Vue = {
   
  prototype: {
   
    _init() {
   },
    $data: {
   },
    $props: {
   },
    $set() {
   },
    $del() {
   },
    $watch() {
   },
    /* new add start */
    $on() {
   },
    $once() {
   },
    $off() {
   },
    $emit() {
   },
    /* new add end */
  }
}

core/instance/lifecycle.js

• 给 Vue 的原型上添加 _update 方法 ( 组件更新时触发 )
• 给 Vue 的原型上添加 $forceUpdate 方法 ( 组件强制更新时触发 )
• 给 Vue 的原型上添加 $destroy 方法 ( 组件销毁时触发 )

Vue = {
   
  prototype: {
   
    _init() {
   },
    $data: {
   },
    $props: {
   },
    $set() {
   },
    $del() {
   },
    $watch() {
   },
    $on() {
   },
    $once() {
   },
    $off() {
   },
    $emit() {
   },
    /* new add start */
    _update() {
   },
    $forceUpdate() {
   },
    $destroy() {
   },
    /* new add end */
  }
}

core/instance/render.js

• 给 Vue 的原型上添加 $nextTick 方法 ( 解决异步渲染获取不到 DOM 元素的问题 )
• 给 Vue 的原型上添加 _render 方法 ( 创建 虚拟DOM )

Vue = {
   
  prototype: {
   
    _init() {
   },
    $data: {
   },
    $props: {
   },
    $set() {
   },
    $del() {
   },
    $watch() {
   },
    $on() {
   },
    $once() {
   },
    $off() {
   },
    $emit() {
   },
    _update() {
   },
    $forceUpdate() {
   },
    $destroy() {
   },
    /* new add start */
    $nextTick() {
   },
    _render() {
   },
    /* new add end */
  }
}

core/instance/render-helpers/index.js

• 给 Vue 的原型上添加上一堆模板编译过程中的辅助方法

Vue = {