这个算法决定了当
数据变化时，框架如何高效地更新页面。虽然它们的目标相同，但实现方式却有些不同。
diff 在干的事👇🏻：
想象一下，你有一堆积木搭成的城堡（这就是你的页面），现在你想改变城堡的样子（数据变了）。你有两个选择：\
- 把整个城堡推倒重搭（性能差）\
- 只修
改需要改变的部分（这就是diff算法在做的事）
找不同👇🏻：
改变需要变的部分，那么这个部分怎么找出来。找出来的原理，也就是diff的底层原理：
react
先来讲一下React的diff：
- 同级比较：只比较同一层级的节点，不跨层级比较
- 类型不同就拆掉重建：如果节点类型变了（比如从
<div>变成<span>），直接整个子树拆掉重建 - 用key来识别元素：给列表中的元素
加上key，帮助React识别哪些元素只是移动了位置
vue
- 双端比较：会同时
从新旧列表的开头和结尾开始比较 - 就地复用：尽可能复用已有的DOM节点，而不是销毁重建
- 更智能的key使用：即使没有key，Vue也能更好地处理一些简单情况
讲例子
假设我们有一个列表从[A,B,C,D]变成[D,A,B,C]：
react
1. 发现第一个元素从A变成D，不匹配，拆掉A
2. 第二个元素B和A不匹配，拆掉B
3. 第三个元素C和B不匹配，拆掉C
4. 最后剩下D，新建A、B、C
（如果加了key，React会表现得更好）
vue
1. 比较新旧列表的开头：A和D不匹配
2. 比较新旧列表的结尾：D和C不匹配
3. 发现旧列表的D和新列表的开头D匹配，把D移动到前面
4. 剩下的A,B,C顺序没变，直接保留
（不需要key也能很好地处理）
总结
最后记住：无论哪种框架，给列表项加key都是好习惯！这就像给你的行李贴标签，搬家时更容易找到它们该放哪。
彩蛋
更新机制
react
- 手动触发更新：React 需要显式调用
setState或useState来通知组件重新渲染。 - 生命周期控制：React 提供生命周期方法（如
componentDidUpdate），让开发者手动控制更新逻辑。
vue
- 自动响应变化：Vue 使用响应式系统，数据变化时自动触发相关组件更新，无需手动通知。
- 模板驱动渲染：Vue 的模板会被编译成高效的渲染函数，数据变化时自动重新执行渲染。
一句话总结这个彩蛋：
Vue 是 "数据变，自动更新"，React 是 "你说更新，它才更新"。
不懂来找我 ⭐️
