深入理解Vue.js：Template编译探索
52 浏览量
更新于2024-09-02
收藏 98KB PDF 举报
"Vue.js的template编译过程是Vue框架中的核心功能之一，它将HTML模板转化为JavaScript渲染函数，使得Vue能够高效地管理组件状态并更新视图。本文将深入探讨Vue.js的template编译问题，基于对Vue.js源码的学习和理解进行分析。
在Vue实例的 `$mount` 方法中，我们看到Vue的挂载过程。首先，原始的 `$mount` 方法被保存，以备后续使用。挂载组件时，Vue会检查传入的元素是否是`<body>`或`<html>`，如果是，则会抛出警告，因为不建议直接在这些顶级元素上挂载Vue实例。
关键步骤在于处理`options.render`和`options.template`。当`render`函数不存在时，Vue将尝试编译`template`。模板可以是字符串或者来自`el`的`outerHTML`。如果`template`存在，Vue会进行编译；若两者都不存在，Vue将无法知道如何渲染，从而抛出错误。
Vue的模板编译分为以下几个阶段：
1. **预处理（Preprocessing）**：Vue首先解析`template`字符串，将其转化为一个抽象语法树（AST，Abstract Syntax Tree）。这个过程包括识别指令、插值、条件语句、循环等模板元素，并生成对应的AST节点。
2. **优化（Optimization）**：Vue在构建AST时会进行一些性能优化，例如标记静态节点，这些节点在数据变化时不需要重新渲染。这提高了渲染效率，避免不必要的DOM操作。
3. **代码生成（Code Generation）**：有了优化后的AST，Vue将生成JavaScript渲染函数。这个函数描述了如何根据当前的数据状态生成虚拟DOM（VDOM），并在实际DOM中进行更新。生成的`render`函数通常包含`_c`（创建元素）、`_v`（创建文本节点）、`_e`（创建评论节点）等辅助函数调用。
4. **运行时编译（Runtime Compilation）**：在浏览器环境中，如果Vue实例没有预先编译好的`render`函数，Vue会在运行时进行编译。这增加了初始加载时间，但允许动态模板。然而，在生产环境中，通常会使用`vue-template-compiler`预编译模板到`render`函数，以减少运行时的负担。
5. **渲染（Rendering）**：最后，生成的`render`函数在Vue实例上执行，根据数据状态生成新的VDOM树，并通过比较新旧VDOM树的差异来执行最小化的DOM操作，实现高效的更新。
通过了解Vue.js的template编译过程，开发者可以更好地理解框架的工作原理，从而编写更高效、更符合Vue最佳实践的代码。同时，对于深入学习Vue源码的人来说，这有助于理解Vue的内部机制，以便于进行更高级的定制和性能优化。
聊聊聊聊Vue.js的的template编译的问题编译的问题
主要介绍了聊聊Vue.js的template编译的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
写在前面写在前面
因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。
文章的原地址：https://github.com/answershuto/learnVue。
在学习过程中，为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src，希望可以对其他想学习Vue源码的小伙伴有所帮助。
可能会有理解存在偏差的地方，欢迎提issue指出，共同学习，共同进步。
$mount
首先看一下mount的代码
/*把原本不带编译的$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 <html> or <body> - mount to normal elements instead.`
)
return this
}
const options = this.$options
// resolve template/el and convert to render function
/*处理模板templete，编译成render函数，render不存在的时候才会编译template，否则优先使用render*/
if (!options.render) {
let template = options.template
/*template存在的时候取template，不存在的时候取el的outerHTML*/
if (template) {
/*当template是字符串的时候*/
if (typeof template === 'string') {
if (template.charAt(0) === '#') {
template = idToTemplate(template)
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && !template) {
warn(
`Template element not found or is empty: ${options.template}`,
this
)
}
}
} else if (template.nodeType) {
/*当template为DOM节点的时候*/
template = template.innerHTML
} else {
/*报错*/
if (process.env.NODE_ENV !== 'production') {
warn('invalid template option:' + template, this)
}
return this
}
} else if (el) {
/*获取element的outerHTML*/
template = getOuterHTML(el)
}
if (template) {
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
mark('compile')
}
/*将template编译成render函数，这里会有render以及staticRenderFns两个返回，这是vue的编译时优化，static静态不需要在VNode更新时进行patch，优化性能*/
const { render, staticRenderFns } = compileToFunctions(template, {
shouldDecodeNewlines,
delimiters: options.delimiters
}, this)
options.render = render
options.staticRenderFns = staticRenderFns
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
mark('compile end')
measure(`${this._name} compile`, 'compile', 'compile end')
}
}
}
/*Github:https://github.com/answershuto*/
/*调用const mount = Vue.prototype.$mount保存下来的不带编译的mount*/
return mount.call(this, el, hydrating)
}
通过mount代码我们可以看到，在mount的过程中，如果render函数不存在（render函数存在会优先使用render）会将template进行compileToFunctions得到
render以及staticRenderFns。譬如说手写组件时加入了template的情况都会在运行时进行编译。而render function在运行后会返回VNode节点，供页面的渲
下载后可阅读完整内容，剩余5页未读，立即下载
2020-04-22 上传
2021-03-20 上传
108 浏览量
2023-06-28 上传
2020-12-29 上传
2021-05-15 上传
2021-01-19 上传
2021-05-27 上传
2021-04-19 上传
