Vue3相比Vue2，它在diff算法上做的优化
Vue的diff算法用于比较新旧虚拟 DOM，确定哪些部分需要更新、删除或添加。它的关键目标是通过尽可能少的操作来更新实际 DOM，减少性能开销。
1. 静态节点提升 (Static Hoisting)
Vue2: Vue2虽然会对模板进行编译优化，但对于静态节点（内容不会变化的节点），每次渲染时仍然会进行比较。
Vue3: 在编译阶段，会将静态节点提升到渲染函数之外。这意味着这些节点在后续的渲染中会被完全跳过diff过程，直接复用。
2. 基于最长递增子序列 (Longest Increasing Subsequence, LIS) 的优化
Vue2: Vue2的diff算法基于双端比较。在特殊情况下，比如列表中间插入或删除元素时，可能会导致一些不必要的DOM移动操作。
Vue3: Vue3还是双端比较，在中间乱序部分，基于动态规划的思想，使用贪心算法和二分查找最长递增子序列，找出需要移动的最小元素集合，最大程度地复用DOM节点。
举个例子，如果一个列表原先是[a, b, c, d]，更新后变成[a, c, b, e]，那么Vue2可能会移动b和c两次，而Vue3使用LIS算法会发现[a, c]是最长递增子序列，只需要移动b和插入e即可，减少了DOM操作。
3. Patch Flags (补丁标志)
Patch Flags通过为动态节点添加标志来标记其可能发生的变化类型，从而在diff过程中实现更精准的更新。
作用： 减少不必要的比较，提高diff效率。
实现方式： 在编译阶段，Vue3的编译器会为每个动态节点生成一个二进制的标志位，即Patch Flags。这些标志位表示了该节点可能发生的变化，例如：
TEXT: 文本内容变化。CLASS: class属性变化。STYLE: style属性变化。PROPS: 除了class、style之外的其他属性变化。FULL_PROPS: 完整props变化，需要进行完整的props diff。CHILDREN: 子节点变化。DYNAMIC_SLOTS: 动态插槽。- 等等。
工作原理： 在diff过程中，Vue3会首先检查节点的Patch Flags。如果一个节点没有Patch Flags，说明它是静态节点，直接跳过diff。如果一个节点有Patch Flags，则根据标志位来判断需要进行哪些比较和更新。例如，如果一个节点的Patch Flags 只包含
TEXT，那么只需要比较和更新文本内容即可，无需比较其他属性或子节点。示例： 考虑以下模板：
<div>
<p class="static-class" :class="dynamicClass">Hello {{ message }}</p>
</div>
编译后，p标签对应的VNode可能会包含如下Patch Flags：
// 假设 dynamicClass 和 message 是动态的
{
type: 'p',
props: { class: ['static-class', dynamicClass] },
children: 'Hello ' + message,
patchFlag: PatchFlags.CLASS | PatchFlags.TEXT // 表示 class 和 text 内容是动态的
}
在diff过程中，Vue3会根据PatchFlags.CLASS | PatchFlags.TEXT知道只需要比较和更新class属性和文本内容，而无需比较其他属性。
4. Block树结构 (Block Tree)
Block树结构将模板划分为一个个Block，每个Block内部的DOM结构是稳定的。
作用： 进一步缩小diff的范围，提高性能。
定义： 一个Block是一段连续的、结构相同的DOM区域。通常，一个组件的根节点就是一个Block。如果组件内部使用了
v-if、v-for等指令，则会创建新的Block。工作原理： 在渲染时，Vue3会将模板编译成一棵Block树。每个Block都有一个
dynamicChildren数组，存储了该Block中所有动态节点的VNode。在diff 程中，Vue3会首先比较Block树的结构。如果Block的key发生变化，则整个Block会被替换。如果Block的key没有变化，则只会比较该Block的dynamicChildren数组，而无需比较Block内部的静态节点。示例： 考虑以下模板：
<div>
<p>Static Text 1</p>
<span v-if="show">Dynamic Text {{ message }}</span>
<p>Static Text 2</p>
</div>
在这个例子中，div是一个Block，p标签是静态节点，span标签是动态节点。如果show的值发生变化，只会影响到span标签的渲染和diff，而p标签则会被完全跳过。
总结
Patch Flags通过为动态节点添加标志位，实现了更精准的更新； Block树结构通过将模板划分为Block，缩小了diff的范围。
Block树缩小了diff的范围，而Patch Flags则进一步缩小了每个Block内部需要比较的节点范围。