# vue源码 - 编译器

上一篇文章 vue源码 - 编译器之解析 详细详解了编译器的第一部分,如何将 html 模版字符串编译成 AST。今天带来编译器的第二部分,优化 AST,也是大家常说的静态标记。

目标:深入理解编译器的静态标记过程

其余章节更新中...

# 总结

  1. 详细说一下静态标记的过程
  • 标记静态节点
    • 通过递归的方式标记所有的元素节点
    • 如果节点本身是静态节点,但是存在非静态的子节点,则将节点修改为非静态节点
  • 标记静态根节点,基于静态节点,进一步标记静态根节点
    • 如果节点本身是静态节点 && 而且有子节点 && 子节点不全是文本节点,则标记为静态根节点
    • 如果节点本身不是静态根节点,则递归的遍历所有子节点,在子节点中标记静态根
  1. 什么样的节点才可以被标记为静态节点?
  • 文本节点
  • 节点上没有 v-bind、v-for、v-if 等指令
  • 非组件

# 参考

https://juejin.cn/post/6960465810682806308

上次更新: 4/10/2022, 10:26:50 AM