Vue 有了响应式为何还要 Diff？
Vue 有响应式为何还要 Diff？#
响应式知道哪个组件要更新，Diff 决定怎么更新 DOM。
两者职责#
| 作用 | 解决什么问题 | |
|---|---|---|
| 响应式 | 追踪数据 → 定位组件 | 哪个组件需要更新 |
| Diff | 对比 VDOM → 最小化 DOM 操作 | 如何高效更新该组件 |
代码示例#
// 响应式：知道 Child 组件要更新
const state = reactive({ list: [{ id: 1, text: 'a' }] });
// 状态变化
state.list.push({ id: 2, text: 'b' }); // 通知 Child 更新
// Child 渲染新 VDOM
// 旧: [li#a]
// 新: [li#a, li#b]
// Diff：对比新旧 VDOM，只插入新 li，复用旧 li
// 而非清空整个 ul 重新创建