Hello，大家好，我是 Sunday。

昨天有位同學(xué)面試的時(shí)候被問(wèn)到了：“說(shuō)下 Vue 和 React 數(shù)據(jù)驅(qū)動(dòng)原理的區(qū)別”。

所以今天咱們把這個(gè)問(wèn)題說(shuō)一下。

回答這種問(wèn)題，我們可以采取 總分總 的方式，從以下四個(gè)層面進(jìn)行描述：

1. 數(shù)據(jù)驅(qū)動(dòng)
2. 數(shù)據(jù)追蹤的機(jī)制
3. 數(shù)據(jù)流控制
4. 數(shù)據(jù)更新機(jī)制

答案

React 和 Vue 都基于數(shù)據(jù)驅(qū)動(dòng)的理念，也就是：當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，視圖自動(dòng)更新。但是，他們?cè)跀?shù)據(jù)驅(qū)動(dòng)的實(shí)現(xiàn)方式和概念是不同的。大致可以分為 4 點(diǎn)去說(shuō)：

1. 數(shù)據(jù)驅(qū)動(dòng)概念的核心思想

• React：React 的數(shù)據(jù)驅(qū)動(dòng)依賴于不可變數(shù)據(jù)和單向數(shù)據(jù)流的思想。React 組件的狀態(tài)（state）是通過(guò)不可變的數(shù)據(jù)更新觸發(fā)重新渲染。組件的更新是通過(guò)“重新渲染整個(gè)組件樹(shù)”，而不是直接操作 DOM 元素。
• Vue：Vue 則采用響應(yīng)式數(shù)據(jù)系統(tǒng)，通過(guò) Proxy（Vue 3）或 Object.defineProperty（Vue 2）來(lái)追蹤數(shù)據(jù)的變化，自動(dòng)更新視圖。Vue 的數(shù)據(jù)驅(qū)動(dòng)模型更接近于“聲明式”編程，開(kāi)發(fā)者只需要修改數(shù)據(jù)，Vue 的響應(yīng)式系統(tǒng)會(huì)自動(dòng)處理 DOM 更新。

2. 數(shù)據(jù)變化的追蹤機(jī)制

React: 手動(dòng)觸發(fā)更新

• 在 React 中，數(shù)據(jù)變化通過(guò)顯式地更新 state 來(lái)驅(qū)動(dòng)視圖更新。例如，使用 this.setState 或 useState 鉤子來(lái)改變組件的狀態(tài)，然后 React 會(huì)根據(jù)更新后的狀態(tài)重新渲染組件。
• 不可變數(shù)據(jù)：React 強(qiáng)調(diào)數(shù)據(jù)不可變，任何對(duì)數(shù)據(jù)的修改都需要返回一個(gè)新的對(duì)象，以便 React 識(shí)別狀態(tài)是否發(fā)生變化。React 通過(guò)淺比較來(lái)判斷組件是否需要更新。

示例：

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

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

只有通過(guò) setCount 才會(huì)觸發(fā)組件重新渲染。

Vue: 自動(dòng)追蹤數(shù)據(jù)變化

• Vue 的數(shù)據(jù)變化是自動(dòng)追蹤的。當(dāng)數(shù)據(jù)被修改時(shí)，Vue 的響應(yīng)式系統(tǒng)會(huì)立即追蹤到這個(gè)變化，并自動(dòng)更新相應(yīng)的視圖。Vue 的響應(yīng)式系統(tǒng)會(huì)偵聽(tīng)對(duì)象屬性的變化，通過(guò) Proxy（Vue 3）或 Object.defineProperty（Vue 2）來(lái)劫持?jǐn)?shù)據(jù)訪問(wèn)和修改，從而實(shí)現(xiàn)數(shù)據(jù)與視圖的雙向綁定。
• 這種機(jī)制讓 Vue 的開(kāi)發(fā)體驗(yàn)更加簡(jiǎn)潔，開(kāi)發(fā)者不需要手動(dòng)觸發(fā)視圖更新，只要修改數(shù)據(jù)，視圖就會(huì)自動(dòng)反映最新?tīng)顟B(tài)。

示例：

<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 就會(huì)觸發(fā)視圖更新，無(wú)需顯式調(diào)用渲染函數(shù)。

3. 數(shù)據(jù)流的控制

React: 單向數(shù)據(jù)流

• React 的數(shù)據(jù)流是單向的，即數(shù)據(jù)從父組件流向子組件，通過(guò) props 進(jìn)行傳遞。子組件不能直接修改父組件的數(shù)據(jù)，而是通過(guò)回調(diào)函數(shù)讓父組件更新?tīng)顟B(tài)，這種設(shè)計(jì)簡(jiǎn)化了數(shù)據(jù)流的管理，特別是在復(fù)雜應(yīng)用中，保證了數(shù)據(jù)流的可控性和可預(yù)測(cè)性。
• 不可變性：React 提倡數(shù)據(jù)不可變，組件狀態(tài)或 props 發(fā)生變化時(shí)，會(huì)創(chuàng)建新的對(duì)象，并通過(guò) 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>
  );
}

數(shù)據(jù)從 Parent 流向 Child，更新通過(guò)回調(diào)函數(shù)從 Child 傳回 Parent。

Vue: 雙向數(shù)據(jù)綁定和單向數(shù)據(jù)流

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

示例：?jiǎn)蜗驍?shù)據(jù)流

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

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

示例：雙向數(shù)據(jù)綁定

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

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

通過(guò) v-model，name 的變化會(huì)自動(dòng)更新輸入框的內(nèi)容，輸入框內(nèi)容變化也會(huì)更新 name。

4. 數(shù)據(jù)更新與性能優(yōu)化

React: 虛擬 DOM + Reconciliation

• React 使用虛擬 DOM來(lái)管理視圖的更新。當(dāng)組件的狀態(tài)或 props 發(fā)生變化時(shí)，React 會(huì)重新渲染虛擬 DOM 樹(shù)，并將其與之前的虛擬 DOM 進(jìn)行對(duì)比（即 diff 過(guò)程）。React 通過(guò) diff 算法找出變化的部分，并將這些部分應(yīng)用到真實(shí) DOM 中。
• 不可變數(shù)據(jù)：由于 React 使用不可變數(shù)據(jù)，React 可以通過(guò)淺比較來(lái)判斷數(shù)據(jù)是否發(fā)生了變化，從而減少不必要的更新。

Vue: 響應(yīng)式系統(tǒng) + 模板編譯優(yōu)化

• Vue 的響應(yīng)式系統(tǒng)可以自動(dòng)追蹤數(shù)據(jù)變化，并只對(duì)發(fā)生變化的數(shù)據(jù)進(jìn)行更新。通過(guò)響應(yīng)式系統(tǒng)，Vue 可以做到在數(shù)據(jù)層發(fā)生變化時(shí)，自動(dòng)將變化反映到視圖層，而無(wú)需額外的 diff 比較。
• 模板編譯優(yōu)化：Vue 在編譯階段對(duì)模板進(jìn)行分析，提取出靜態(tài)和動(dòng)態(tài)部分，從而優(yōu)化渲染時(shí)的性能。靜態(tài)內(nèi)容只渲染一次，而動(dòng)態(tài)內(nèi)容則通過(guò)響應(yīng)式系統(tǒng)高效更新。

5. 總結(jié)

Vue 的數(shù)據(jù)驅(qū)動(dòng)更加自動(dòng)化和“聲明式”，而 React 則更依賴開(kāi)發(fā)者顯式地控制狀態(tài)和數(shù)據(jù)流