Vue3编译优化

准备工作在vue源码下执行npm run dev-compiler，打开/packages/template-explorer/index.html;

屏幕快照 2022-02-17 上午10.47.44.png

控制台可以左边写代码，右边观察渲染函数，打开控制台还可以看到AST，很方便查看三者之间的关系

1、静态节点提升
如果是静态的，则直接会储存起来后期不再生成，即hoiststatic,所谓内存换时间；

2. 补丁标记和动态属性记录
   第一个p标签的title是动态的，多了一个二进制数字8(1000)，只要第4位是1，就知道动态属性props, 在vue2中会对节点的所有属性做更新，因为vue2没有做标记；

3. 缓存事件处理程序
   onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.onClick(...args)))尝试从_cache中拿事件处理函数，如果第一次则创建缓存起来；因为每次rander的时候拿到的onClick函数都是相同的，所以不会认为这个属性发生变化，不会导致组件的频繁更新；类似于react中的回调函数的优化,比如useCallback；

4. block块优化
   比如div内部谁是动态的，将来则会放在生成的虚拟DOM的dynamicProps和dynamicChildren中，下次做更新不去向下递归，只把dynamicChildren标记的做更新

shapFlags

export const enum ShapeFlags {
  ELEMENT = 1,
  FUNCTIONAL_COMPONENT = 1 << 1,//左移运算，二进制10 => 2
  STATEFUL_COMPONENT = 1 << 2,
  TEXT_CHILDREN = 1 << 3,
  ARRAY_CHILDREN = 1 << 4,
  SLOTS_CHILDREN = 1 << 5,
  TELEPORT = 1 << 6,
  SUSPENSE = 1 << 7,
  COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
  COMPONENT_KEPT_ALIVE = 1 << 9,
  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT
}