Vue2.0 瞧一下vm.$mount()

最新推荐文章于 2025-02-24 16:50:12 发布

原创

最新推荐文章于 2025-02-24 16:50:12 发布 · 771 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

Vue2.0中的$mount()方法主要用于手动挂载Vue实例到DOM。当未在实例化时指定el选项时，可以通过$mount()手动挂载。完整版与只包含运行时的版本在编译过程上有差异，完整版会编译template或el为渲染函数，而运行时版本则不包含编译。$mount()的核心功能在运行时版本中，包括校验render，创建空的VNode，触发beforeMount和mounted钩子，以及通过Watcher实现数据变化时的更新。

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节点。