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

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

Watch

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

源碼分析

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

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

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

解讀

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

export function watch(
  source: WatchSource,
  cb: WatchCallback,
  options?: WatchOptions
): WatchStopHandle {
  // 創(chuàng)建一個(gè)watcher實(shí)例
  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)建了一個(gè)Watcher實(shí)例，其中vm是Vue實(shí)例，source是要監(jiān)視的數(shù)據(jù)，cb是回調(diào)函數(shù)，以及其他選項(xiàng)。

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

class Watcher {
  // ...
  get() {
    // 設(shè)置當(dāng)前的watcher為活動(dòng)watcher
    pushTarget(this);
    // 執(zhí)行監(jiān)視的數(shù)據(jù)，觸發(fā)依賴項(xiàng)的收集
    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ā)依賴項(xiàng)追蹤，以及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>

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

Computed

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

源碼分析

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

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

解讀

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

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

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

2、ComputedRefImpl的核心工作是負(fù)責(zé)追蹤依賴項(xiàng)和緩存計(jì)算結(jié)果。下面是一個(gè)簡(jiǎn)化的示例：

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

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

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

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

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(() => {
  // 計(jì)算屬性，依賴于 count
  return count.value * 2;
});
const incrementCount = () => {
  count.value++;
};
</script>
</template>

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

區(qū)別與使用場(chǎng)景

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

區(qū)別

• 響應(yīng)方式：

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

• 緩存：

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

使用場(chǎng)景

• watch的使用場(chǎng)景：

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

• computed的使用場(chǎng)景：

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

面試建議

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

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

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

最新評(píng)論