React和Vue的区别

Vue 和 React 最核心的不同点之一：底层实现机制的差异。

这确实是理解两者本质区别的关键，虽然它们都用组件来构建 UI，但内部工作方式完全不同。下面详细解释一下：

🔍 React：Virtual DOM + Diff 算法

👉 原理

React 本质上是「状态驱动 UI 的声明式框架」，当组件的 state 或 props 发生变化时，React 会：

1. 重新执行 render 函数（对函数组件来说就是重新调用组件函数）；
2. 生成新的 Virtual DOM（虚拟 DOM 是 React 自己构建的一棵 JavaScript 对象树，描述 UI）；
3. 比较新旧 Virtual DOM 的差异（也就是 diff 算法）；
4. 计算出最小的 DOM 操作，最终更新真实的 DOM。

✅ 特点：

• 每次更新都重新渲染整棵组件的虚拟 DOM 树；
• 通过 diff 算法优化性能，避免不必要的 DOM 操作；
• UI 的更新是「重新构建再比对」的过程；
• 数据不是响应式的，只是每次改变 state 后触发重新渲染。

🟢 Vue：响应式系统 + 精确更新 DOM

👉 原理

Vue 是一个「基于响应式的视图系统」，当你定义一个数据对象时，Vue 会使用 Proxy 或 Object.defineProperty（Vue 2）进行劫持，把这些属性变成响应式的。

响应式的核心机制：

1. 响应式数据被“劫持”，在你修改数据的时候，Vue 会知道具体是哪个数据变了；
2. 模板中使用的数据会建立依赖关系（依赖追踪），比如哪个组件用了哪个数据；
3. 当数据变化时，只会精确更新那些依赖了这个数据的地方；
4. 不需要重新执行整个组件函数或重新构建整棵 DOM 树。

✅ 特点：

• 数据变了，Vue 会“精确追踪”哪些地方用了这个数据；
• 只更新真正需要更新的 DOM；
• 更新效率高，依赖管理由 Vue 的响应式系统自动完成；
• 是“数据驱动视图 + 自动依赖追踪 + 局部更新”的方式。

🔬 对比图示（类比）：

✅ 举个例子来对比感受：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// React
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p> {/* 每次 setCount 后，整个组件会重新执行 */}
    </div>
  );
}
<!-- Vue -->
<template>
  <div>
    <p>{{ count }}</p> <!-- Vue 会追踪这个 count -->
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0); // 修改 count.value 只会更新这一个 <p>
</script>

在 React 中，每次点击都会执行整个组件函数；而 Vue 中，只会响应式更新用到 count 的地方。

📌 总结一句话：

React：变了 -> 重新渲染（靠 diff 算法优化）
Vue：变了 -> 精确知道谁变了，只更新那部分（靠响应式系统）

• ← Previous Post
• Next Post →