- 下载源码地址
源码: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 初始化过程
-
在 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中
在申明的后面调用 mount
mount 声明在文件src/platforms/web/runtime/index.js
mount 函数最后调用 mountComponent 函数
mountComponent函数声明在文件src/core/instance/lifecycle.js
在 mountComponent 中首先声明updateComponent 函数,然后初始化一个总 watch,把updateComponent 当成参数传递过程,在 watch 组件中会执行 updateComponent.
在 updateComponent 函数中有两个重要的函数_update,_render 方法
- _render 方法是把真实 dom 转成虚拟 dom.
-
_update 方法是把 vdom==>dom,下图中的1在初始化的时候 prevVnode 为 null,会进入初始化流程.从而完成 Vue 的初始化.从而完成整个 Vue 的初始化
image.png
