《Vue.js设计与实现》笔记 第15章：编译器核心技术概览

Vue.js设计与实现 第15章：编译器核心技术概览

本章导读

前面章节已经实现：

响应式系统

↓

渲染器

↓

Diff算法

↓

组件系统

这些属于：

Runtime（运行时）

但是 Vue 还有另一半核心：

Compiler（编译器）

Vue完整架构：

Compiler + Runtime

作用：

Template

↓

Render Function

↓

VNode

↓

DOM

一、什么是编译器

Compiler：

编译器

作用：

把一种代码

转换成另一种代码

例如：

<div>{{msg}}</div>

转换：

render(){

 return h(
   'div',
   msg
 )

}

二、Vue为什么需要编译器

浏览器认识：

JavaScript

不认识：

Template

例如：

<div>{{msg}}</div>

浏览器无法执行。

因此：

必须先转换

三、Template与Render Function

Template

<div>
  {{msg}}
</div>

优点：

简单

易读

缺点：

无法直接执行

Render Function

render(){

 return h(
   'div',
   this.msg
 )

}

优点：

可直接执行

缺点：

编写困难

Vue解决方案：

开发写Template

编译器生成Render

四、Vue编译流程

整体流程：

Template

↓

Parse

↓

AST

↓

Transform

↓

JS AST

↓

Generate

↓

Render Function

这是整个Compiler核心流程。

五、第一阶段：Parse

输入

<div>Hello</div>

输出：

AST

例如：

{
 type:'Root',
 children:[
   {
     type:'Element',
     tag:'div'
   }
 ]
}

作用：

模板结构化

六、第二阶段：Transform

输入

AST

输出：

优化后的AST

作用：

分析

修改

优化

例如：

<div>Hello</div>

转换：

h(
 'div',
 'Hello'
)

对应结构。

七、第三阶段：Generate

输入

JS AST

输出：

render()

例如：

function render(){

 return h(
   'div',
   'Hello'
 )

}

八、什么是AST

AST：

Abstract Syntax Tree

抽象语法树

作用：

描述代码结构

例如：

<div>
  <p>Hello</p>
</div>

结构：

Root

└── div

     └── p

          └── Hello

九、为什么需要AST

字符串：

<div>Hello</div>

难以：

分析

优化

转换

AST：

树结构

方便：

遍历

修改

生成代码

十、编译器中的遍历

编译器大量使用：

树遍历

例如：

Root

↓

Element

↓

Text

访问每个节点。

十一、转换(Transform)

示例

模板：

<p>Hello</p>

AST：

Element

↓

Text

Transform：

Element

↓

h('p')

生成JS结构。

十二、节点转换器(Node Transform)

作用：

处理特定节点

例如：

transformElement()

transformText()

分别处理：

Element

Text

十三、上下文(Context)

Transform阶段维护：

context

保存：

当前节点

父节点

索引

替换方法

方便修改AST。

十四、节点替换

例如：

replaceNode()

作用：

旧节点

↓

新节点

实现AST优化。

十五、节点删除

例如：

removeNode()

作用：

删除无效节点

例如：

<!-- comment -->

生产环境：

删除

十六、编译优化思想

Compiler最大价值：

提前优化

例如：

<div>Hello</div>

永远不变。

编译阶段即可确定：

静态节点

运行时无需Diff。

十七、静态提升

Static Hoisting

模板：

<div>Hello</div>

生成：

const vnode = ...

function render(){

 return vnode

}

避免：

重复创建VNode

十八、Patch Flag

Vue3重要优化。

作用：

标记动态内容

例如：

<div>{{msg}}</div>

只有：

msg动态

更新时：

只检查msg

十九、Block Tree

Vue3优化。

作用：

收集动态节点

形成：

动态节点树

更新时：

跳过静态部分

二十、编译器与运行时关系

Compiler：

负责分析

Runtime：

负责执行

流程：

Template

↓

Compiler

↓

Render Function

↓

Runtime

↓

VNode

↓

DOM

第二十一章核心流程

Template

↓

Parse

↓

AST

↓

Transform

↓

JS AST

↓

Generate

↓

Render Function

↓

Runtime

↓

DOM

第15章核心知识图谱

Compiler

│

├── Parse

│      └── AST

│

├── Transform

│      ├── 遍历
│      ├── 替换
│      └── 删除

│

├── Generate

│      └── Render

│

└── Optimization

       ├── Static Hoisting
       ├── Patch Flag
       └── Block Tree

高频面试题

Vue为什么需要Compiler？

Template不能直接执行

需要转换：

Render Function

Vue编译流程是什么？

Parse

↓

Transform

↓

Generate

什么是AST？

抽象语法树

为什么需要AST？

方便：

分析

优化

转换

Transform作用？

修改AST

Generate作用？

生成Render函数

Static Hoisting是什么？

静态节点提升

避免：

重复创建VNode

Patch Flag是什么？

标记动态节点

Block Tree作用？

收集动态节点

减少Diff范围。

Compiler与Runtime区别？

Compiler：

编译阶段

Runtime：

运行阶段

本章总结

Vue Compiler核心流程：

Template

↓

Parse

↓

AST

↓

Transform

↓

JS AST

↓

Generate

↓

Render Function

Compiler主要价值：

提前优化

核心优化：

Static Hoisting

Patch Flag

Block Tree

Vue整体架构：

Compiler

+

Runtime

Compiler负责：

分析

转换

优化

Runtime负责：

执行

渲染

更新

这是理解 Vue3 编译优化体系的基础，也是后续学习 Parser、Transform、Generate 三个章节的总纲。

posted @ 2025-06-25 14:27  Li_pk  阅读(6)  评论(0)    收藏  举报