这次分析以在 web 应用下, Runtime + Compiler 构建出来的 Vue.js为例。Vue的本质上就是一个用 Function 实现的 Class,然后它的原型 prototype 以及它本身都扩展了一系列的方法和属性。
Vue 的初始化逻辑非常清楚,实质上就是是往Vue的原型上去挂载一些方法,或者给 Vue
这个对象本身扩展全局的静态方法。把这些方法拆分到不同的功能模块中,把不同的功能逻辑拆成一些单独的函数执行,让主线逻辑一目了然,Vue 初始化主要就干了几件事情,合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data、props、computed、watcher 等等。在初始化的最后,检测到如果有 el
属性,则调用 vm.$mount
方法挂载 vm
,挂载的目标就是把模板渲染成最终的 DOM。简单来说,整个初始化的目的就是为了渲染成一个DOM
由于这个过程非常复杂,所以我采用总分的方法进行分析,先介绍一个整体的脉络,整个过程,再从每个过程进行具体分析。为了简化这个整体过程,所以凡是涉及只涉及主线,支线在接下来进行挨个拆解。
首先,入口文件为src/platforms/web/entry-runtime-with-compiler.js。从这个文件下手,
找到Vue的原始定义instance/index.js中,它的实质是一个Function,需要通过new Vue去实例化。接着,会执行
this._init
方法,在这个方法中,会去执行生命周期函数,在这个方法的最后,会有一个对el
属性的检测,如果有,则调用 vm.$mount
方法挂载 vm
,再经过render函数渲染成DOM。
一个Vue对象被渲染成DOM,过程很复杂,涉及到的源码内容众多,这里我简单先以js的形式看一个大概,对整个过程做一个了解,之后考虑做一个函数版的对应来看
最后,照例给出相关的源文件的github地址:
https://github.com/vuejs/vue/blob/dev/src/platforms/web/entry-runtime-with-compiler.js
https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/index.js
https://github.com/vuejs/vue/blob/dev/src/core/index.js
https://github.com/vuejs/vue/blob/dev/src/core/instance/index.js
https://github.com/vuejs/vue/blob/dev/src/core/instance/init.js
https://github.com/vuejs/vue/blob/dev/src/core/instance/render.js