Vue2 源码(一)Vue 的初始化

• 下载源码地址
  源码:https://github.com/vuejs/vue 下载源码地址.

• 准备工作
  为了方便在源码在浏览器中调试使用,在 package.json 中script 中 dev 添加 sourcemap

  
  package.json

• 如何找到项目入口文件
  分析 package.json查找文件目录

  
  package.json
• 1中查找 scripts 文件下的 config.js

• 在 scripts/config.js 中查找 web-full-dev

  
  image.png

• 3中查找文件的 resolve 的别人目录

  
  resolve 方法

• aliases 中分析路径

  
  aliases
  

  通过aliases和 3分析得知,源码的入口文件目录是src/platforms/web/entry-runtime-with-compiler.js

Vue 的初始化

• 在src/platforms/web/entry-runtime-with-compiler.js文件中,发现 Vue 的原型上面挂载$mount 方法,查找 Vue 的初始化方法

  
  image.png
  entry-runtime-with-compiler.js
  runtime/index

• 7 中 core/index 通过aliases的图片中分析 core 代表 src/core/index

  
  src/core/index
• 8中查找 Vue 的初始化函数

• 9初始化全局方法:其中包括 Vue.component,Vue.filter,Vue.diective,Vue.use,Vue.mixin,Vue.util,Vue.extend

  
  instance.js

• 10 代表 Vue 的初始化函数

  
  image.png
• 调用_init 函数

截图 11 中代表 Vue 初始化过程

init.png

• 在 Vue 开始初始化的时候,首先合并选项,合并的结果是产生全局的组件.全局的组件.合并的结果如下

  
  image.png

• 合并选项结束之后正式开始 Vue 的初始化

  
  image.png
• 截图中标注的 15的地方各个函数调用即表示 Vue 的初始化的过程
• initLifecycle
  表示初始化组件的父类(root),子类(refs),已经内部定义的监听
  image.png

• initEvents
  初始化事件,需要注意的是事件的派发和事件的执行时同一个对象

  
  image.png
  

  截图中 16 的标识的意思是子类拿到父类事件,然后在之类中执行.从而证明事件的派发和执行都是一个对象

• initRender
  initRender方法是初始化组件的插槽scopedSlots,attrs 和$listeners属性
  上述完成之后开始调用beforeCreate,完成beforeCreate的过程
• beforeCreate 完成之后开始开始数据的处理
• initInjections 开始注入数据 injections 属于最早的数据,在后续的 computed 和 data 中可以使用injections中的数据

• initState 表示初始化数据顺序如下图所示

  
  image.png
• 最先开始初始化的数据是 props 数据(1)
• 其次是方法(2)
• 再是data 数据(3)
• 再是计算数据(computed)
• 最后是监听数据(watch)
  从初始化的顺序可以看出来,在 data 中可以使用 props 数据和 inject 数据

• initProvide 在 vue 中 inject 和 provide 是成对出现的,inject 的数据可以通过 provide 的数据得到,initProvide表示初始化接收器

  
  image.png

• 上述数据初始化完成之后开始初始化 Vue 的方法

  
  image.png
• stateMixin 初始化属性和方法 如props/delete()/$watch()方法
• eventsMixin 初始化数据方法 比如 on()/once()
• lifecycleMixin 初始化生命周期方法 _update()内部更新方法 destory 组件销毁
• renderMixin 初始化方法 mount 方法,完成 Vue 的初始化

• Vue 的初始化完成准备开始挂载$mount()

  
  image.png

声明$mount的函数文件在src/platforms/web/entry-runtime-with-compiler.js中

image.png
image.png

在申明的后面调用 mount
mount 声明在文件src/platforms/web/runtime/index.js

image.png
mount 函数最后调用 mountComponent 函数
mountComponent函数声明在文件src/core/instance/lifecycle.js
image.png

在 mountComponent 中首先声明updateComponent 函数,然后初始化一个总 watch,把updateComponent 当成参数传递过程,在 watch 组件中会执行 updateComponent.
在 updateComponent 函数中有两个重要的函数_update,_render 方法

• _render 方法是把真实 dom 转成虚拟 dom.

• _update 方法是把 vdom==>dom,下图中的1在初始化的时候 prevVnode 为 null,会进入初始化流程.从而完成 Vue 的初始化.从而完成整个 Vue 的初始化

  
  image.png