Vue 编译器如何优化?


背景

Vue 编译器(compiler)将模板转换为渲染函数,了解其优化机制有助于深入理解 Vue 性能。


现有答案

答案 1:静态提升

编译器会分析模板,将静态节点(不包含动态绑定的 HTML 标签)提升到渲染函数外部,避免重复创建。

答案 2:patchFlag

Vue3 使用 block 和 patchFlag 标记动态节点,运行时只更新变化的部分。

答案 3:预编译

Vite 在构建阶段预编译模板,运行时无需解析模板字符串。


探索路径

  • 阅读 Vue 编译器源码
  • 分析编译产物

关联

  • 相关概念Vue
  • 相关概念Vite