一、引子
在学习Vue的虚拟DOM的实现过程中，多次遇到“挂载”这个词，偏偏在看到“挂载”这个词的时候，自己没有办法将这个词对应的Vue生命周期具体的哪个部分，意识到自己对于生命周期的理解还是不够深入，遂决定先加强学习一个$mount的这个过程，查看了部分源码以及摆渡了网上的很多文章，现做一点总结，下面这个简约版的流程图很短小精悍：
二、探究生命周期
在创建一个vue实例的时候(var vm = new Vue(options))。Vue的构造函数将自动运行 this._init（启动函数）。启动函数的最后一步为initRender(vm)：
// Vue.prototype._init
...
initLifecycle(vm);
initEvents(vm);
callHook(vm, 'beforeCreate');
initState(vm);
callHook(vm, 'created');
initRender(vm);
initRender中调用vm.options.el)：
//initRender
...
if (vm.$options.el) {
vm.$mount(vm.$options.el);
}
将实例挂载到dom上，至此启动函数完成。
若Vue实例上面没有el属性，则生命周期执行到这就挂起了，直到手动去执行vm.mount这个方法究竟完成了哪些事情，这就是我们需要重点关注的。
三、$mount函数的学习
当你去寻找mount的实现和平台、环境都有关系，主要是依据构建方式区分为下面两种：
（1）独立构建：包含模板编译器
渲染过程: html字符串 → render函数 → vnode → 真实dom节点
（2）运行时构建： 不包含模板编译器
渲染过程: render函数 → vnode → 真实dom节点
可以看一下官网中的解释：运行时 + 编译器 vs. 只包含运行时
// 需要编译器
new Vue({
template: '{{ hi }}'
})
// 不需要编译器
new Vue({
render (h) {
return h('div', this.hi)
}
})
3.1 运行时+编译器的$mount函数
学习的重点就是有编译器的mount函数上面做了一层包装，首先限制 el 不能为 body、html 这类根节点，接着，检查是否有 render 方法，如果没有则会把 el 或者 template 字符串转换成 render 方法，最后调用 compileToFunctions 方法实现render在线编译，在确保已经存在render函数的情况下，最后还是调用原型上面的mount函数。
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && query(el)
/* istanbul ignore if */
if (el === document.body || el === document.documentElement) {
process.env.NODE_ENV !== 'production' && warn(
`Do not mount Vue to or - mount to normal elements instead.`
)
return this
}
const options = this.$options
// resolve template/el and convert to render function
if (!options.render) {
...
const { render, staticRenderFns } = compileToFunctions(template, {
shouldDecodeNewlines,
shouldDecodeNewlinesForHref,
delimiters: options.delimiters,
comments: options.comments
}, this)
options.render = render
options.staticRenderFns = staticRenderFns
...
}
return mount.call(this, el, hydrating)
}
3.2 原型上面的$mount函数
原型的$mount函数中最重要的是mountComponent 方法：
export function mountComponent (
vm: Component,
el: ?Element,
hydrating?: boolean
): Component {
vm.$el = el
if (!vm.$options.render) {
vm.$options.render = createEmptyVNode
...
}
callHook(vm, 'beforeMount')
let updateComponent
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
updateComponent = () => {
const name = vm._name
const id = vm._uid
const startTag = `vue-perf-start:${id}`
const endTag = `vue-perf-end:${id}`
mark(startTag)
const vnode = vm._render()
mark(endTag)
measure(`vue ${name} render`, startTag, endTag)
mark(startTag)
vm._update(vnode, hydrating)
mark(endTag)
measure(`vue ${name} patch`, startTag, endTag)
}
} else {
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
}
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted) {
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */)
hydrating = false
if (vm.$vnode == null) {
vm._isMounted = true
callHook(vm, 'mounted')
}
return vm
}
mountComponent 先调用 vm._render 方法先生成虚拟 Node，再实例化一个Watcher，由此看出，渲染最核心的 2 个方法：vm._render 和 vm._update。
Vue 的 _render 方法是实例的一个私有方法，可以把实例渲染成一个虚拟 Node，定义在 src/core/instance/render.js 中。平时开发工作中很少手写 render ，大多是写 template 模板，在上面的 mounted 方法中会把 template 编译成 render 方法
Vue 的 _update 是实例的私有方法，它只在首次渲染和数据更新两种情况下被调用，_update 方法把 VNode 渲染成真实的 DOM
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
const vm: Component = this
const prevEl = vm.$el
const prevVnode = vm._vnode
const prevActiveInstance = activeInstance
activeInstance = vm
vm._vnode = vnode
if (!prevVnode) {
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
} else {
vm.$el = vm.__patch__(prevVnode, vnode)
}
activeInstance = prevActiveInstance
if (prevEl) {
prevEl.__vue__ = null
}
if (vm.$el) {
vm.$el.__vue__ = vm
}
if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
vm.$parent.$el = vm.$el
}
}
这方法中最终实现将真实的DOM节点挂载到vm.$el上面，至此VUE生命周期中的挂载过程结束。
四、生命周期回顾
由上面的所有描述，最终可以得到一个较为完整但是很精简的流程图：
最后附上一份VUE的生命周期图，对照着整个挂载过程，一切都很清晰。
最最后，大家觉得有什么问题，或者有什么疑惑恶意给我留言，觉得有所帮助的，记得点个赞哦！！