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即为根节点。