浅谈vue之$mount

• Z时代
• 2024-01-10
• 分类：综合

直接开始吧

生命周期：

下图是官网给出的生命周期图，这次我们先简单讲一下mount，从图中可以看出vm.mount是vue渲染的主要函数。

构建版本：

在正式介绍原理之前首先要说一下完整版和只包含运行时版的区别。

完整版：同时包含编译器和运行时的版本。

编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。

运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

官网的解释是：如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版。

当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。运行时版本相比完整版体积要小大约30%，所以应该尽可能使用这个版本。如果仍然希望使用完整版，则需要在打包工具里配置别名：

$mount\mathrm{函}\mathrm{数}\mathrm{：}\mathrm{完}\mathrm{整}\mathrm{版}\mathrm{首}\mathrm{先}\mathrm{我}\mathrm{们}\mathrm{先}\mathrm{将}vue\mathrm{原}\mathrm{型}\mathrm{上}\mathrm{的}$

完整版

首先我们先将vue原型上的mount函数：完整版首先我们先将vue原型上的mount方法保存在mount中，运用函数劫持在原始功能上新增一些其他功能，在完整版中需要新增编译功能。

el参数支持元素类型或字符串类型的选择器，因此我们还需要通过el获取DOM元素

接下来就是最重要的编译功能，首先会去看options中是否有render, 如果没有，需要获取模板，然后将模板编译成渲染函数，最后赋值给render

idToTemplate函数实现如下

如果用户没有设置template选项，那么使用，getOuterHTML方法中从用户提供的el选项中获取模板

紧接着就是将模板编译成渲染函数

compileTofunctions函数可以将模板编译成渲染函数

运行版

mountComponent实现如下

这次就先分享到这啦，能力有限，如有错漏，望指正。

以上是 浅谈vue之$mount 的全部内容， 来源链接： utcz.com/z/377154.html