vm.$mount()不经常用,因为在我们实例化Vue的时候我们可以传入属性el: "#app",目的在于将实例挂载到DOM元素下,但如果不传el选项,就需要手动挂载,这个时候唯一的方法就是调用$mount()方法。
就像在vue项目的main.js里我们经常会写到这样一句话:
new Vue({
xxxx
}).$mount("#app");
$mount()函数的表现在完整版和只包含运行时版本之间有差异,差异在于编译过程,也就是完整版会首先检查template或者el选项提供的模板是否已经转换为渲染函数,如果没有,就要先编译为渲染函数,再进入挂载流程。所以两个版本之间是包含关系。
通过函数劫持方法,来拓展核心功能来实现完整版,首先判断$options上是否有render,如果没有,再取template选项,如果仍没有,再取el选项中的模板。之后通过compileToFunctions函数生成渲染函数赋值给options.render。这部分就是差异之处具体在做的事情。
那么只包含运行时版本就涵盖了$mount方法的核心功能:
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && inBrowser ? query(el) : undefined
return mountComponent(this, el, hydrating)
}
mountComponent()首先还是会校验render,如果没有则会返回一个注释类型的VNode节点。
export function mountComponent (
vm: Component,
el: ?Element,
hydrating?: boolean
): Component {
vm.$el = el
if (!vm.$options.render) {
vm.$options.render = createEmptyVNode
if (process.env.NODE_ENV !== 'production') {
// 一些警告
}
}
callHook(vm, 'beforeMount')
......
// we set this to vm._watcher inside the watcher's constructor
// since the watcher's initial patch may call $forceUpdate (e.g. inside child
// component's mounted hook), which relies on vm._watcher being already defined
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */)
hydrating = false
// manually mounted instance, call mounted on self
// mounted is called for render-created child components in its inserted hook
if (vm.$vnode == null) {
vm._isMounted = true
callHook(vm, 'mounted')
}
return vm
}
然后触发beforeMount钩子。这之后执行真正的挂载操作。vm._update(vm._render())就是调用渲染函数得到最新的虚拟树节点,然后通过_update方法和上一次的旧的VNode对比并更新DOM。new Watcher可以实现挂载的持续性,在这个过程中,每次有新的数据渲染更新,会触发beforeUpdate钩子。整个挂载完成之后,就会触发mounted钩子。