模板渲染是一个前端的基础概念，每个框架都有自己的实现方式：
```mermaid
flowchart TD
A[解析模板] --> B[生成AST]
B --> C[优化编译]
C --> D[生成渲染函数]
D --> E[创建虚拟DOM]
E --> F[渲染真实DOM]
F --> G[更新视图]
A1[将模板字符串解析成标记tokens] --> A
B1[构建抽象语法树<br/>描述模板结构] --> B
C1[静态节点提升<br/>事件缓存<br/>条件优化] --> C
D1[生成可执行的<br/>JavaScript函数] --> D
E1[构建虚拟节点树<br/>进行DOM Diff] --> E
F1[操作浏览器DOM API<br/>更新真实节点] --> F
G1[触发重绘/重排<br/>完成视图更新] --> G
style A fill:#f9f,stroke:#333,stroke-width:2px
style B fill:#bbf,stroke:#333,stroke-width:2px
style C fill:#ddf,stroke:#333,stroke-width:2px
style D fill:#fbb,stroke:#333,stroke-width:2px
style E fill:#bfb,stroke:#333,stroke-width:2px
style F fill:#fbf,stroke:#333,stroke-width:2px
style G fill:#ff9,stroke:#333,stroke-width:2px
```
## 通用的渲染概念
```Java
// 1. 模板解析
Template -> AST(抽象语法树)
// 2. 编译优化
AST -> 优化 -> 渲染函数
// 3. 虚拟DOM
VNode {
type: String | Component
props: Object
children: Array | String
}
// 4. DOM操作
diff算法 -> 最小化DOM更新
```
## [Vue3@](
[email protected])的模版渲染
```vue
<!-- 声明式渲染 -->
<template>
<div class="user">
Hello, {{ user.name }}!
</div>
</template>
<!-- 编译后的渲染函数 -->
function render() {
return h('div', { class: 'user' }, [
'Hello, ' + user.name + '!'
])
}
```