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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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)

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值