Vue2：设计原理

[huaTJ0210]

1、vue2.x中编译的优化

在 Vue 2.x 版本中在编译过程中有一个叫做 optimize 的阶段，会进行标记静态根节点的操作，被标记为静态根节点的节点：

• 生成一个 staticRenderFns，首次渲染会以这个静态根节点 vnode 进行缓存，后续渲染会直接取缓存中的，从而避免重复渲染，
• 生成的 vnode 会带有 isStatic = true 的属性，将会在 diff 过程中被跳过。但 Vue 2.x 对静态节点进行缓存就是一种空间换时间的优化策略，为了避免过度优化，在 Vue 2.x 中，识别静态根节点是需要满足：
  • 子节点是静态节点
  • 子节点不是只有一个静态文本节点的节点