vue如何实现模板引擎
Vue 模板引擎实现原理
Vue 的模板引擎通过编译将模板字符串转换为渲染函数，最终生成虚拟 DOM。核心流程分为模板解析、优化和代码生成三个阶段。
模板解析阶段
Vue 使用正则表达式匹配模板中的指令、插值和标签，将其转换为抽象语法树（AST）。解析器会识别以下语法：
- 文本内容：
{{ expression }} - 指令：
v-if,v-for等 - HTML 标签：
<div>,<span>等
示例 AST 结构：
{
"type": 1,
"tag": "div",
"attrsList": [{"name":"v-if","value":"show"}],
"children": [{
"type": 2,
"expression": "_s(message)",
"text": "{{ message }}"
}]
}优化阶段
遍历 AST 进行静态节点标记。静态节点指不依赖动态数据的 DOM 节点，在后续更新时可跳过比对：
- 标记静态根节点（包含静态子树的父节点）
- 标记静态节点（纯文本或无绑定的节点）
优化后的 AST 会添加 static 属性：
if (node.staticRoot) {
node.static = true
}代码生成阶段
将优化后的 AST 转换为可执行的渲染函数代码。生成器根据节点类型输出不同的 JavaScript 代码片段：
- 元素节点：调用
_c(tag, data, children) - 文本节点：调用
_v(text) - 插值表达式：调用
_s(expression)
示例输出代码：
with(this){
return _c('div',{
directives:[{name:"if",rawName:"v-if",value:(show)}]
},[_v(_s(message))])
}运行时渲染
生成的渲染函数会创建虚拟 DOM 节点（VNode）。Vue 的 _c、_v 等辅助函数负责：
_c()：创建元素 VNode_v()：创建文本 VNode_s()：将值转换为字符串
虚拟 DOM 通过 diff 算法与旧 VNode 比对后，高效更新真实 DOM。
自定义模板引擎扩展
可通过以下方式扩展模板功能：
- 自定义指令：
Vue.directive('highlight', { bind(el, binding) { el.style.backgroundColor = binding.value } }) - 自定义过滤器：
Vue.filter('currency', function(value) { return '$' + value.toFixed(2) }) - 使用渲染函数直接编写逻辑：
render(h) { return h('div', this.items.map(item => { return h('p', item.text) })) }
性能优化建议
- 避免在模板中使用复杂表达式
- 对长列表使用
v-for时添加key - 合理使用
v-if和v-show - 对静态内容使用
v-once指令 - 大型项目可预编译模板（通过 vue-loader）
