Vue实例挂载过程($mount)

Vue中我们通过$mount实例方法挂载vm,$mount方法在多个地方有定义,因为vue可以跨平台例如weex进行开发;主要了解在web这边的vue.js,compiler解析版本的$mount实现。

src/platform/web/entry-runtime-with-compiler.js

主要流程:

1. 缓存原型上的$mount方法,再重新定义该方法
2. 对el做限制,Vue不能挂载在body、html这样的根节点
3. 关键步骤:如果没有render方法,则会把el或者template都转成render方法,最终无论.vue文件开发组件或者el、template属性,都会转成render方法。这个过程叫做“在线编译”,通过调用compilerToFunctions方法实现。
4. 最后调用原先缓存的$mount挂载

Vue.prototype.$mount位于src/platform/web/runtime/index.js

这样设计为了通用,在runtime only的时候能够使用

$mount方法实际上调用了mountComponent方法,这个方法定义在src/core/instance/lifecycle.js文件中

核心流程

1. 实例化一个渲染Watcher
2. 在Watcher回调函数中调用updateComponent()方法
3. 在updateComponent()方法中调用vm._render方法生成虚拟Node,最终调用vm._update更新DOM

Watcher的作用

当初始化或者vm实例中监测数据发生变化时候都会执行回调函数updateComponent()更新DOM

判断是否挂载的依据

函数最后根据根节点上vm._isMounted是否为true,判断实例是否挂载
根节点:vm.$vnode表示vm实例的父虚拟节点,为null即为根节点。

推荐阅读更多精彩内容