Vue 3 vs React 渲染差异模拟器

点击按钮，观察高亮区域（黄色 vs 绿色）的区别。
React (黄色) 模拟组件重渲染， Vue (绿色) 模拟依赖追踪。

React 模式

Snapshot & Re-render

Parent Component Status: Idle
State: 0
Static Child No Props Changed

我虽然没有用到 State，但我被迫重渲染了 😭

// React Console

Vue 3 模式

Reactivity & Proxy

Parent Component Status: Idle
State: 0
Static Child Static Hoisted

我完全没受影响，静静地呆着 😎

// Vue Console

React 原理

当你调用 setState 时，React 会重新运行整个组件函数。

1. 黄色闪烁 表示组件正在“重渲染” (Re-render)。
2. 虽然 Child 组件没有用到 count，但因为它是 Parent 的子板，Parent 刷新了，Child 默认也会刷新（除非用 memo 优化）。
3. React 然后对比新旧 Virtual DOM，最后更新 DOM。

Vue 3 原理

当你修改 count.value 时，Vue 的响应式系统 (Proxy) 会拦截这个操作。

1. 绿色闪烁 仅出现在数字上。这是因为 Vue 建立了一个直接指向该文本节点的“依赖连接”。
2. Parent 和 Child 组件本身不需要重新运行。编译器标记了 Child 是静态的，Vue 运行时完全跳过了它。
3. 这是点对点的精确更新。