Vue3 中模板编译做了哪些优化，你知道吗？

1 PatchFlags 优化

在 Vue.js 中，patchFlags 是用于标记虚拟 DOM 节点状态的一个标志位，用于指示虚拟 DOM 节点在 diff 过程中的一些特性。通过 patchFlags，Vue.js 可以在更新视图时更高效地判断和处理节点的变化，从而提高性能。

以下是关于 patchFlags 的一些描述：

• 作用：patchFlags 主要用于标记虚拟 DOM 节点的状态，例如节点是否为动态节点、节点是否含有动态内容、节点是否为有状态组件等信息，以便在 diff 过程中进行优化处理。
• 优化：通过 patchFlags，Vue.js 可以在 diff 算法中快速识别哪些节点需要深入比较更新，哪些节点可以直接跳过，从而减少不必要的比较操作，提高更新性能。
• 标记类型：常见的 patchFlags 标记类型包括静态节点、动态节点、有状态组件等，不同的标记类型对应不同的处理逻辑，有助于优化 diff 过程。
• 动态设置：在更新虚拟 DOM 时，Vue.js 会动态设置节点的 patchFlags，根据节点内容的变化情况来确定节点的状态，以便后续的 diff 过程可以根据这些标记进行优化处理。
• 性能提升：通过合理地使用 patchFlags，可以减少不必要的比较和更新操作，降低 diff 算法的复杂度，从而提高 Vue.js 应用的性能和响应速度。
  总的来说，patchFlags 在 Vue.js 中扮演着重要的角色，用于优化虚拟 DOM 的 diff 过程，通过标记节点的状态信息，帮助框架更高效地处理视图更新，提升应用性能。合理使用 patchFlags 可以在大型应用或频繁更新的场景下发挥重要作用，是 Vue.js 内部优化的关键机制之一。

<div>
  <h1>Hello Jiang</h1>
  <span>{
   {
   name}}</span>
</div>

此 template 经过模板编译会变成以下代码：

const {
   
  createElementVNode: _createElementVNode,
  toDisplayString: _toDisplayString,
  createTextVNode: _createTextVNode,
  openBlock: _openBlock,
  createElementBlock: _createElementBlock,
} = Vue;

return function render(_ctx, _cache, $props, $setup, $data, $options) {
   
  return (
    _openBlock(),
    _createElementBlock("div", null, [
      _createElementVNode("h1", null, "Hello Jiang"),
      _createTextVNode(),
      _createElementVNode(
        "span",
        null,
        _toDisplayString(_ctx.name),
        1 /* TEXT */
      ),
    ])
  );
};

2.创建虚拟节点

生成的虚拟 DOM 是：

{
   
	type: "div",
    __v_isVNode: true,
    children:[
       {
   type: 'h1', props: null, key: null, …}
       {
   type: Symbol(), props: null, key: null, …}
	   {
   type: 'span', props: null, key: null, …}
    ],
    dynamicChildren:[{
   type: 'span', children: _ctx.name, patchFlag: 1}]
}```

此时生成的虚拟节点多出一个 dynamicChildren 属性。这个就是 block 的作用，block 可以收集所有后代动态节点。这样后续更新时可以直接跳过静态节点，实现靶向更新

动态标识

```javascript
export const enum PatchFlags {
   
  TEXT = 1<