先了解下Vue 3響應(yīng)式

Vue 3使用了Proxy作為其底層響應(yīng)式實現(xiàn)可以監(jiān)聽對象屬性的變化并觸發(fā)相應(yīng)的更新。當你訪問數(shù)據(jù)時，Vue會建立一個依賴關(guān)系，然后在數(shù)據(jù)發(fā)生變化時通知相關(guān)的依賴項，從而更新視圖。在這個背景下，我們深入探討watch和computed的底層源碼和使用上的區(qū)別。

Watch

watch選項允許你監(jiān)聽數(shù)據(jù)的變化并執(zhí)行自定義的操作。它通常用于監(jiān)視某個數(shù)據(jù)的變化并執(zhí)行副作用，比如異步請求、打印日志或觸發(fā)動畫。當你創(chuàng)建一個watch屬性時，Vue會建立一個響應(yīng)式依賴關(guān)系，將該watch屬性關(guān)聯(lián)到你要監(jiān)視的數(shù)據(jù)。當監(jiān)視的數(shù)據(jù)發(fā)生變化時，Vue會通知相關(guān)的watch屬性，觸發(fā)其回調(diào)函數(shù)。這個回調(diào)函數(shù)會接收新值和舊值作為參數(shù)，你可以在其中執(zhí)行所需的操作。

源碼分析

相關(guān)文件：vue/src/runtime-core/apiWatch.ts和vue/src/reactivity/src/effect.ts。

在Vue 3的源碼中，watch的實現(xiàn)主要依賴于createWatcher函數(shù)和Watcher類。

• createWatcher函數(shù)負責創(chuàng)建Watcher實例，并接收監(jiān)視的數(shù)據(jù)、回調(diào)函數(shù)以及其他選項。
• Watcher類是watch的核心，它建立了對監(jiān)視數(shù)據(jù)的依賴，并在數(shù)據(jù)變化時觸發(fā)回調(diào)函數(shù)。
• 在Watcher的內(nèi)部，依賴項追蹤和回調(diào)觸發(fā)是通過Vue的響應(yīng)式系統(tǒng)實現(xiàn)的。當監(jiān)視的數(shù)據(jù)發(fā)生變化時，Vue會檢測到依賴關(guān)系，從而觸發(fā)Watcher的回調(diào)。

解讀

1、在vue/src/runtime-core/apiWatch.ts中，watch函數(shù)負責創(chuàng)建Watcher實例，如下所示：

export function watch(
  source: WatchSource,
  cb: WatchCallback,
  options?: WatchOptions
): WatchStopHandle {
  // 創(chuàng)建一個watcher實例
  const watcher = new Watcher(vm, source, cb, {
    deep: options && options.deep,
    flush: options && options.flush,
    onTrack: options && options.onTrack,
    onTrigger: options && options.onTrigger,
  });
  // ...
}

這段代碼創(chuàng)建了一個Watcher實例，其中vm是Vue實例，source是要監(jiān)視的數(shù)據(jù)，cb是回調(diào)函數(shù)，以及其他選項。

2、Watcher的核心工作在vue/src/reactivity/src/effect.ts`中，其中包含了依賴項追蹤和回調(diào)觸發(fā)的邏輯。下面是一個簡化的示例：

class Watcher {
  // ...
  get() {
    // 設(shè)置當前的watcher為活動watcher
    pushTarget(this);
    // 執(zhí)行監(jiān)視的數(shù)據(jù)，觸發(fā)依賴項的收集
    const value = this.getter.call(this.vm, this.vm);
    // 恢復(fù)之前的watcher
    popTarget();
    return value;
  }
  update() {
    // 觸發(fā)回調(diào)函數(shù)，通知數(shù)據(jù)變化
    this.run();
  }
  run() {
    // 執(zhí)行回調(diào)函數(shù)
    const value = this.get();
    if (value !== this.value || isObject(value) || this.deep) {
      // 觸發(fā)回調(diào)函數(shù)
      this.cb(value, this.value);
      this.value = value;
    }
  }
  // ...
}

這段代碼展示了Watcher的關(guān)鍵部分，包括get方法用于獲取數(shù)據(jù)和觸發(fā)依賴項追蹤，以及update和run方法用于觸發(fā)回調(diào)函數(shù)。

watch使用

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Doubled Count: {{ doubledCount }}</p>
    <button @click="incrementCount">Increment Count</button>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
const count = ref(0);
const doubledCount = ref(0);
const incrementCount = () => {
  count.value++;
};
watch(count, (newVal, oldVal) => {
  // 監(jiān)聽 count 的變化
  doubledCount.value = newVal * 2;
});
</script>
</template>

在這個示例中，我們使用 <script setup> 來導(dǎo)入 ref 和 watch，并創(chuàng)建了 count 和 doubledCount 的響應(yīng)式變量。然后，我們使用 watch 來監(jiān)聽 count 的變化，并在 count 變化時更新 doubledCount 的值。

Computed

computed的工作原理與watch 有一些差異。computed允許派生出一個新的計算屬性，它依賴于其他響應(yīng)式數(shù)據(jù)。當你定義一個computed屬性時，Vue會建立一個依賴關(guān)系，將該計算屬性關(guān)聯(lián)到其依賴項。計算屬性的值僅在其依賴項發(fā)生變化時重新計算，并且在多次訪問時會返回緩存的結(jié)果。這可以減少不必要的計算，提高性能。

源碼分析

在Vue 3的源碼中，computed的實現(xiàn)主要依賴于createComputed函數(shù)和ComputedRefImpl類。相關(guān)部分位于vue/src/reactivity/src/computed.ts文件中。

• createComputed函數(shù)負責創(chuàng)建ComputedRefImpl實例，接收計算函數(shù)和其他選項。
• ComputedRefImpl類是computed的核心，它包裝了計算函數(shù)并實現(xiàn)了緩存機制。計算函數(shù)的執(zhí)行和結(jié)果的緩存是通過Vue的響應(yīng)式系統(tǒng)實現(xiàn)的。
• ComputedRefImpl實例在內(nèi)部維護一個緩存，當依賴的數(shù)據(jù)變化時，它會重新計算并更新緩存。

解讀

1、在vue/src/reactivity/src/computed.ts中，computed函數(shù)負責創(chuàng)建ComputedRefImpl實例，如下所示：

export function computed<T>(
  getter: ComputedGetter<T>,
  options?: ComputedOptions
): ComputedRef<T> {
  // 創(chuàng)建一個computed實例
  const c = new ComputedRefImpl(getter, options);
  // ...
  return c;
}

這段代碼創(chuàng)建了一個ComputedRefImpl實例，其中getter是計算函數(shù)，options包含一些選項。

2、ComputedRefImpl的核心工作是負責追蹤依賴項和緩存計算結(jié)果。下面是一個簡化的示例：

class ComputedRefImpl<T> {
  // ...
  get value() {
    // 如果依賴項發(fā)生變化，或者值尚未計算
    if (this.dirty) {
      // 清除之前的依賴項
      cleanup(this);
      // 設(shè)置當前的computed屬性為活動屬性
      track(this);
      // 執(zhí)行計算函數(shù)，獲取新值
      this.value = this.effect();
      // 標記computed屬性為已計算
      this.dirty = false;
      // 清理并設(shè)置新的依賴項
      stop(this);
    }
    // 返回緩存的值
    return this.value;
  }
  // ...
}

這段代碼展示了ComputedRefImpl的核心工作流程：

• 當首次訪問computed屬性或相關(guān)依賴項發(fā)生變化時，computed屬性會被標記為"dirty"（未計算）。
• 在獲取屬性值時，value的getter函數(shù)會被觸發(fā)。
• 在獲取屬性值時，Vue會清除先前的依賴項，然后重新追蹤新的依賴項。
• 計算函數(shù)(effect)會被執(zhí)行，以獲取新的值。
• 新的值會被緩存，同時dirty標志會被設(shè)置為false，表示已計算。
• 新的依賴項會被清理，并新的依賴項會被追蹤。

這個緩存機制確保了computed屬性的值只有在相關(guān)依賴項發(fā)生變化時才會重新計算，提高了性能并減少不必要的計算。

Computed使用

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Doubled Count: {{ doubledCount }}</p>
    <button @click="incrementCount">Increment Count</button>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue';
const count = ref(0);
const doubledCount = computed(() => {
  // 計算屬性，依賴于 count
  return count.value * 2;
});
const incrementCount = () => {
  count.value++;
};
</script>
</template>

在這個示例中，我們同樣使用 <script setup> 來導(dǎo)入 ref 和 computed，并創(chuàng)建了 count 和 doubledCount 的響應(yīng)式變量。然后，我們使用 computed 來創(chuàng)建計算屬性 doubledCount，該屬性依賴于 count 的值。

區(qū)別與使用場景

上面我們介紹了二者之間的原理及使用方法，下面我們總結(jié)一下watch和computed之間的主要區(qū)別以及它們的使用場景。

區(qū)別

• 響應(yīng)方式：

  • watch用于監(jiān)視數(shù)據(jù)的變化，它允許你執(zhí)行副作用。
  • computed用于派生出一個新的計算屬性，它的值會根據(jù)依賴項的變化而變化。

• 緩存：

  • watch不會緩存結(jié)果，每次數(shù)據(jù)變化都會觸發(fā)回調(diào)。
  • computed會緩存計算結(jié)果，只有在依賴項變化時才會重新計算。

使用場景

• watch的使用場景：

  • 異步操作：當你需要在數(shù)據(jù)變化時執(zhí)行異步操作，如發(fā)送網(wǎng)絡(luò)請求。
  • 副作用：執(zhí)行一些與數(shù)據(jù)變化相關(guān)的操作，如日志記錄或觸發(fā)動畫。
  • 監(jiān)聽多個數(shù)據(jù)的變化并執(zhí)行不同的操作。

• computed的使用場景：

  • 派生屬性：當你需要從現(xiàn)有數(shù)據(jù)派生出新的屬性，以便在模板中使用。
  • 避免重復(fù)計算：當某個計算較為昂貴，但其依賴項不經(jīng)常變化時，使用computed可以避免不必要的計算。

面試建議

面試官常常會問有關(guān)watch和computed的問題，以了解你對Vue的響應(yīng)式系統(tǒng)的理解。下面給一些小建議希望能對你有幫助：

• 理解原理：確保你理解watch和computed的工作原理以及它們與Vue的響應(yīng)式系統(tǒng)的關(guān)系。
• 使用示例：能夠提供清晰的示例，說明如何使用watch和computed，以及何時使用它們。
• 區(qū)別與使用場景：強調(diào)watch和computed之間的區(qū)別，以及何時選擇其中之一的使用場景。
• 性能考慮：在回答關(guān)于性能的問題時，能夠解釋computed如何幫助避免不必要的計算，并提高性能。
• 示范經(jīng)驗：分享你在實際項目中使用watch和computed的經(jīng)驗和成功案例，這可以讓面試官對你的實際技能有更好的了解。

以上就是前端vue面試總問watch和computed區(qū)別及建議總結(jié)的詳細內(nèi)容，更多關(guān)于vue watch computed區(qū)別的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論