Hello，大家好，我是 Sunday。

昨天有位同學面試的時候被問到了：“說下 Vue 和 React 數據驅動原理的區別”。

所以今天咱們把這個問題說一下。

回答這種問題，我們可以采取 總分總 的方式，從以下四個層面進行描述：

1. 數據驅動
2. 數據追蹤的機制
3. 數據流控制
4. 數據更新機制

答案

React 和 Vue 都基于數據驅動的理念，也就是：當數據發生變化時，視圖自動更新。但是，他們在數據驅動的實現方式和概念是不同的。大致可以分為 4 點去說：

1. 數據驅動概念的核心思想

• React：React 的數據驅動依賴于不可變數據和單向數據流的思想。React 組件的狀態（state）是通過不可變的數據更新觸發重新渲染。組件的更新是通過“重新渲染整個組件樹”，而不是直接操作 DOM 元素。
• Vue：Vue 則采用響應式數據系統，通過 Proxy（Vue 3）或 Object.defineProperty（Vue 2）來追蹤數據的變化，自動更新視圖。Vue 的數據驅動模型更接近于“聲明式”編程，開發者只需要修改數據，Vue 的響應式系統會自動處理 DOM 更新。

2. 數據變化的追蹤機制

React: 手動觸發更新

• 在 React 中，數據變化通過顯式地更新 state 來驅動視圖更新。例如，使用 this.setState 或 useState 鉤子來改變組件的狀態，然后 React 會根據更新后的狀態重新渲染組件。
• 不可變數據：React 強調數據不可變，任何對數據的修改都需要返回一個新的對象，以便 React 識別狀態是否發生變化。React 通過淺比較來判斷組件是否需要更新。

示例：

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

只有通過 setCount 才會觸發組件重新渲染。

Vue: 自動追蹤數據變化

• Vue 的數據變化是自動追蹤的。當數據被修改時，Vue 的響應式系統會立即追蹤到這個變化，并自動更新相應的視圖。Vue 的響應式系統會偵聽對象屬性的變化，通過 Proxy（Vue 3）或 Object.defineProperty（Vue 2）來劫持數據訪問和修改，從而實現數據與視圖的雙向綁定。
• 這種機制讓 Vue 的開發體驗更加簡潔，開發者不需要手動觸發視圖更新，只要修改數據，視圖就會自動反映最新狀態。

示例：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increase">Increase</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increase() {
      this.count += 1;
    },
  },
};
</script>

在 Vue 中，修改 this.count 就會觸發視圖更新，無需顯式調用渲染函數。

3. 數據流的控制

React: 單向數據流

• React 的數據流是單向的，即數據從父組件流向子組件，通過 props 進行傳遞。子組件不能直接修改父組件的數據，而是通過回調函數讓父組件更新狀態，這種設計簡化了數據流的管理，特別是在復雜應用中，保證了數據流的可控性和可預測性。
• 不可變性：React 提倡數據不可變，組件狀態或 props 發生變化時，會創建新的對象，并通過 setState 或 useState 重新渲染組件。

示例：

function Parent() {
  const [count, setCount] = useState(0);

  return <Child count={count} onIncrease={() => setCount(count + 1)} />;
}

function Child({ count, onIncrease }) {
  return (
    <div>
      <p>{count}</p>
      <button onClick={onIncrease}>Increase</button>
    </div>
  );
}

數據從 Parent 流向 Child，更新通過回調函數從 Child 傳回 Parent。

Vue: 雙向數據綁定和單向數據流

• Vue 提供了類似 React 的單向數據流，通過 props 將數據從父組件傳遞到子組件。子組件可以發出事件（如 $emit）通知父組件進行數據更新。
• 但是，Vue 還支持雙向數據綁定，尤其是在表單元素上，Vue 提供了 v-model 指令，可以實現數據的雙向綁定——即視圖中的數據變化會直接更新模型，模型數據變化也會自動反映在視圖上。這使得處理表單、輸入等場景更加簡單。

示例：單向數據流

<template>
  <Child :count="count" @increase="increaseCount" />
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increaseCount() {
      this.count += 1;
    },
  },
};
</script>

示例：雙向數據綁定

<template>
  <input v-model="name" />
</template>

<script>
export default {
  data() {
    return {
      name: '',
    };
  },
};
</script>

通過 v-model，name 的變化會自動更新輸入框的內容，輸入框內容變化也會更新 name。

4. 數據更新與性能優化

React: 虛擬 DOM + Reconciliation

• React 使用虛擬 DOM來管理視圖的更新。當組件的狀態或 props 發生變化時，React 會重新渲染虛擬 DOM 樹，并將其與之前的虛擬 DOM 進行對比（即 diff 過程）。React 通過 diff 算法找出變化的部分，并將這些部分應用到真實 DOM 中。
• 不可變數據：由于 React 使用不可變數據，React 可以通過淺比較來判斷數據是否發生了變化，從而減少不必要的更新。

Vue: 響應式系統 + 模板編譯優化

• Vue 的響應式系統可以自動追蹤數據變化，并只對發生變化的數據進行更新。通過響應式系統，Vue 可以做到在數據層發生變化時，自動將變化反映到視圖層，而無需額外的 diff 比較。
• 模板編譯優化：Vue 在編譯階段對模板進行分析，提取出靜態和動態部分，從而優化渲染時的性能。靜態內容只渲染一次，而動態內容則通過響應式系統高效更新。

5. 總結

Vue 的數據驅動更加自動化和“聲明式”，而 React 則更依賴開發者顯式地控制狀態和數據流