Vue 的模板编译原理

类别：vue / 日期：2023-02-22 / 浏览：286 / 评论：0

vue模板的编译过程分为3个阶段：

第⼀步：解析

将模板字符串解析⽣成 AST，⽣成的AST 元素节点总共有 3 种类型，1 为普通元素， 2 为表达式，3为纯⽂本。

第⼆步：优化语法树

Vue 模板中并不是所有数据都是响应式的，有很多数据是⾸次渲染后就永远不会变化的，那么这部分数据⽣成的 DOM 也不会变化，我们可以在 patch 的过程跳过对他们的⽐对。

此阶段会深度遍历⽣成的 AST 树，检测它的每⼀颗⼦树是不是静态节点，如果是静态节点则它们⽣成DOM 永远不需要改变，这对运⾏时对模板的更新起到极⼤的优化作⽤。

const code = generate(ast, options)

通过 generate ⽅法，将ast⽣成 render 函数。

评论区

四

五

六

日