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<
