前端框架中运用的diff算法的原理是什么？
以vue3举例：
Vue3的diff算法可以理解成“高效比对新旧DOM的智能工具”，核心目的是：用最少的操作更新DOM，避免全量重新渲染。
用通俗的话讲，就像你整理书架时，不会把所有书都扔掉重摆，而是先对比“现在的书架”和“想变成的书架”，只动需要调整的部分。
核心原理：只比“该比的”，跳过“没必要的”
1. 先看“大框架”：同层比对，不跨级找
DOM结构是树形的（比如<div>里有<p>，<p>里有<span>）。Vue3的diff会一层一层比对，比如先比对最外层的<div>，再比对它的子元素<p>，不会跳过某一层去比对更深的元素。
就像整理书架时，先看“第一层架子”有没有变化，再看每个架子里的书，不会直接跳到第三层去对比。这样能避免做无用功。
2. 给元素“贴标签”：key的作用
如果列表里的元素有key（比如v-for="item in list" :key="item.id"），diff算法会把key当成元素的“身份证”。比对时先看“身份证”：
- 如果新旧列表里有相同
key的元素，说明是同一个元素，只需要更新内容（比如文字、样式），不用删除再创建。 - 如果
key不存在了，才会删掉这个元素；如果出现新key，才会新增元素。
没有key的话，Vue会默认用“位置”比对（比如第一个元素对第一个元素），容易出问题。比如列表删除中间元素时，后面的元素会被误判成“修改”而不是“位移”。
3. 快速跳过“完全一样”的元素
比对时会先看两个元素的“类型”（比如都是<div>还是一个<div>一个<p>）：
- 如果类型都不一样，直接删掉旧的、创建新的（比如
<div>换成<p>，没必要比对内部了）。 - 如果类型一样，再看属性（比如
class、style），属性没变的话就跳过，只改变化的属性。
就像你换手机壳时，如果手机型号没变，只换壳就行，不用连手机一起换。
4. 列表比对：找“最长递增子序列”（最精髓的优化）
如果列表元素发生了位移（比如从[A,B,C,D]变成[B,A,D,C]），Vue3不会一个个挪动，而是先找“不需要动的元素”（比如A和B虽然换了位置，但D还在原来的位置后面），形成“最长递增子序列”，然后只移动剩下的元素。
就像排队时，有人换位置，你先看哪些人没动，让他们站着不动，剩下的人再调整，比所有人重新排队快得多。
总结：Vue3 diff的核心思路
- 分层比对：只同一层比，不跨级。
- 用key认元素：通过key确定“同一个元素”，减少创建/删除。
- 跳过不变的：类型、属性没变的元素直接跳过。
- 智能挪位置：列表位移时，优先保留不动的元素，少挪动。
最终目的就是：尽可能少操作DOM（因为DOM操作很慢），只改必须改的部分，让页面更新更高效。