什么是watch屬性

在 Vue 3 中，watch 仍然是一種用于監(jiān)聽數(shù)據(jù)變化并執(zhí)行相應(yīng)操作的方式，不過(guò)在組合式 API 中，watch 的使用方式與選項(xiàng)式 API 略有不同。以下是關(guān)于 Vue 3 中的 watch 的一些基本信息：

使用 watch 的基本語(yǔ)法：

在組合式 API 中，你可以使用 watch 函數(shù)來(lái)監(jiān)聽一個(gè)響應(yīng)式數(shù)據(jù)的變化。

import { ref, watch } from 'vue';
const myValue = ref(0);
watch(myValue, (newValue, oldValue) => {
  console.log(`myValue changed from ${oldValue} to ${newValue}`);
});

在上面的例子中，watch 函數(shù)接受兩個(gè)參數(shù)：要監(jiān)聽的響應(yīng)式數(shù)據(jù)和回調(diào)函數(shù)。每當(dāng) myValue 的值變化時(shí)，回調(diào)函數(shù)就會(huì)被觸發(fā)。

監(jiān)聽計(jì)算屬性：

你也可以使用 watch 函數(shù)來(lái)監(jiān)聽計(jì)算屬性的變化。

import { ref, computed, watch } from 'vue';
const myValue = ref(0);
const squaredValue = computed(() => myValue.value ** 2);
watch(squaredValue, (newValue, oldValue) => {
  console.log(`squaredValue changed from ${oldValue} to ${newValue}`);
});

在這個(gè)例子中，watch 監(jiān)聽了 squaredValue 這個(gè)計(jì)算屬性的變化。

停止監(jiān)聽：

watch 函數(shù)返回一個(gè) stop 函數(shù)，用于停止監(jiān)聽。

import { ref, watch } from 'vue';
const myValue = ref(0);
const stopWatch = watch(myValue, (newValue, oldValue) => {
  console.log(`myValue changed from ${oldValue} to ${newValue}`);
});
// 停止監(jiān)聽
stopWatch();

即時(shí)調(diào)用

在 Vue 3 中，你可以通過(guò)將 immediate 設(shè)置為 true 來(lái)實(shí)現(xiàn)在 watch 中立即執(zhí)行回調(diào)函數(shù)。當(dāng) immediate 為 true 時(shí)，watch 會(huì)在偵聽器被創(chuàng)建的時(shí)候立即執(zhí)行一次回調(diào)函數(shù)。

以下是一個(gè)使用 watch 的例子，演示了如何使用 immediate: true 實(shí)現(xiàn)即時(shí)回調(diào)：

import { ref, watch } from 'vue';
const myValue = ref(0);
watch(
  myValue,
  (newValue, oldValue) => {
    console.log(`myValue changed from ${oldValue} to ${newValue}`);
  },
  { immediate: true }
);
// 在這里修改 myValue 的值
myValue.value = 42;

在上面的例子中，watch 的第三個(gè)參數(shù)是一個(gè)選項(xiàng)對(duì)象，通過(guò) { immediate: true } 設(shè)置了立即執(zhí)行回調(diào)。因此，當(dāng) myValue 的值發(fā)生變化時(shí)，watch 會(huì)立即執(zhí)行回調(diào)函數(shù)。

深度監(jiān)聽：

你可以使用 watch 的第三個(gè)參數(shù)來(lái)進(jìn)行深度監(jiān)聽。

import { ref, watch } from 'vue';
const myObject = ref({ prop: 1 });
watch(myObject, (newValue, oldValue) => {
  console.log('myObject changed', newValue);
}, { deep: true });

在這個(gè)例子中，如果 myObject 內(nèi)部的屬性發(fā)生變化，也會(huì)觸發(fā)監(jiān)聽器。

注意事項(xiàng)：

性能開銷： 深度監(jiān)聽會(huì)對(duì)對(duì)象進(jìn)行遞歸遍歷，因此可能會(huì)帶來(lái)一些性能開銷。如果不需要深度監(jiān)聽，最好避免使用 { deep: true }。

對(duì)象引用： 深度監(jiān)聽只能監(jiān)聽對(duì)象的引用變化，而不能監(jiān)聽對(duì)象內(nèi)部屬性的變化。如果需要監(jiān)聽對(duì)象內(nèi)部屬性的變化，可以考慮使用 watchEffect。

watchEffect

watchEffect 是 Vue 3 中提供的一個(gè)函數(shù)，用于創(chuàng)建即時(shí)執(zhí)行的偵聽器。它會(huì)立即執(zhí)行一次傳入的函數(shù)，同時(shí)會(huì)追蹤函數(shù)內(nèi)部使用到的響應(yīng)式數(shù)據(jù)，當(dāng)這些數(shù)據(jù)發(fā)生變化時(shí)，會(huì)再次執(zhí)行該函數(shù)。

主要特點(diǎn)和作用如下：

即時(shí)執(zhí)行： watchEffect 會(huì)在創(chuàng)建時(shí)立即執(zhí)行一次傳入的函數(shù)，而且之后會(huì)在函數(shù)內(nèi)使用到的響應(yīng)式數(shù)據(jù)發(fā)生變化時(shí)再次執(zhí)行。

自動(dòng)追蹤依賴： Vue 3 會(huì)自動(dòng)追蹤 watchEffect 內(nèi)部使用到的響應(yīng)式數(shù)據(jù)，并在這些數(shù)據(jù)變化時(shí)重新執(zhí)行傳入的函數(shù)。這樣可以確保函數(shù)的執(zhí)行與數(shù)據(jù)的變化保持同步。

無(wú)需指定偵聽的具體數(shù)據(jù)： 不像 watch 需要明確指定要偵聽的數(shù)據(jù)，watchEffect 會(huì)自動(dòng)偵聽函數(shù)內(nèi)部使用到的所有響應(yīng)式數(shù)據(jù)。

下面是一個(gè)簡(jiǎn)單的使用示例：

import { ref, watchEffect } from 'vue';
const myValue = ref(0);
watchEffect(() => {
  console.log(`myValue changed to ${myValue.value}`);
});
// 在這里修改 myValue 的值
myValue.value = 42;

在上面的例子中，watchEffect 會(huì)在初始化時(shí)執(zhí)行一次傳入的函數(shù)，并在 myValue 的值發(fā)生變化時(shí)再次執(zhí)行。這種特性使得 watchEffect 在需要立即執(zhí)行和無(wú)需手動(dòng)指定偵聽的場(chǎng)景下非常方便。

watch VS watchEffect

watchEffect 和 watch 是 Vue 3 中用于監(jiān)聽數(shù)據(jù)變化的兩個(gè)主要 API。它們有一些關(guān)鍵的區(qū)別：

watchEffect

即時(shí)執(zhí)行： watchEffect 在創(chuàng)建時(shí)立即執(zhí)行一次傳入的函數(shù)，然后會(huì)在函數(shù)內(nèi)使用到的響應(yīng)式數(shù)據(jù)發(fā)生變化時(shí)再次執(zhí)行。這使得 watchEffect 適合于需要立即執(zhí)行的場(chǎng)景。

自動(dòng)追蹤依賴： watchEffect 會(huì)自動(dòng)追蹤函數(shù)內(nèi)部使用到的響應(yīng)式數(shù)據(jù)，無(wú)需手動(dòng)指定偵聽的具體數(shù)據(jù)。這使得代碼更簡(jiǎn)潔，不需要額外的配置。

無(wú)需清理： watchEffect 返回一個(gè)無(wú)需手動(dòng)停止的函數(shù)，當(dāng)組件卸載時(shí)，Vue 會(huì)自動(dòng)停止對(duì)響應(yīng)式數(shù)據(jù)的追蹤。

import { ref, watchEffect } from 'vue';
const myValue = ref(0);
watchEffect(() => {
  console.log(`myValue changed to ${myValue.value}`);
});

watch

需要明確指定偵聽的數(shù)據(jù)： watch 需要你明確指定要偵聽的數(shù)據(jù)。你可以監(jiān)聽一個(gè)或多個(gè)數(shù)據(jù)，甚至可以監(jiān)聽計(jì)算屬性或深度偵聽對(duì)象。

更多配置選項(xiàng)： watch 提供更多的配置選項(xiàng)，允許你指定 immediate 參數(shù)以立即執(zhí)行回調(diào)函數(shù)，使用 deep 參數(shù)進(jìn)行深度偵聽，以及使用 flush 參數(shù)控制回調(diào)函數(shù)的調(diào)用時(shí)機(jī)。

需要手動(dòng)清理： watch 返回一個(gè)停止監(jiān)聽的函數(shù)，你需要手動(dòng)調(diào)用這個(gè)函數(shù)來(lái)停止對(duì)響應(yīng)式數(shù)據(jù)的監(jiān)聽，特別是在組件卸載時(shí)。

import { ref, watch } from 'vue';
const myValue = ref(0);
watch(myValue, (newValue, oldValue) => {
  console.log(`myValue changed from ${oldValue} to ${newValue}`);
});

選擇使用場(chǎng)景

• 使用 watchEffect 當(dāng)你希望簡(jiǎn)化代碼，即時(shí)執(zhí)行回調(diào)，并且不需要手動(dòng)停止監(jiān)聽。
• 使用 watch 當(dāng)你需要更多的配置選項(xiàng)，例如需要指定 immediate、deep 或手動(dòng)停止監(jiān)聽的情況下。

監(jiān)聽器 VS 計(jì)算屬性

監(jiān)聽器（watch）和計(jì)算屬性（computed）是 Vue 中兩種不同的響應(yīng)式數(shù)據(jù)處理方式，它們有一些關(guān)鍵的區(qū)別：

計(jì)算屬性 (computed)

用途： 計(jì)算屬性用于根據(jù)依賴的響應(yīng)式數(shù)據(jù)動(dòng)態(tài)計(jì)算出一個(gè)新值。它通常用于對(duì)數(shù)據(jù)的派生，而不是直接存儲(chǔ)數(shù)據(jù)。

特點(diǎn)： 計(jì)算屬性是基于它的依賴進(jìn)行緩存的。只有在依賴數(shù)據(jù)發(fā)生變化時(shí)，計(jì)算屬性才會(huì)重新計(jì)算。這對(duì)于避免不必要的計(jì)算和提高性能非常有用。

語(yǔ)法： 計(jì)算屬性使用 computed 函數(shù)來(lái)創(chuàng)建。計(jì)算屬性的定義包括一個(gè) get 函數(shù)，用于計(jì)算屬性的值，以及可選的 set 函數(shù)，用于處理對(duì)計(jì)算屬性的修改。

import { computed } from 'vue';
const fullName = computed({
  get() {
    return `${this.firstName} ${this.lastName}`;
  },
  set(value) {
    const [firstName, lastName] = value.split(' ');
    this.firstName = firstName;
    this.lastName = lastName;
  }
});

監(jiān)聽器 (watch)

• 用途： 監(jiān)聽器用于在某個(gè)數(shù)據(jù)變化時(shí)執(zhí)行特定的操作，例如在數(shù)據(jù)變化時(shí)執(zhí)行一些副作用或異步操作。
• 特點(diǎn)： 監(jiān)聽器可以監(jiān)聽一個(gè)或多個(gè)數(shù)據(jù)，當(dāng)這些數(shù)據(jù)變化時(shí)執(zhí)行回調(diào)函數(shù)。監(jiān)聽器更靈活，可以處理更復(fù)雜的邏輯。
• 語(yǔ)法： 監(jiān)聽器使用 watch 函數(shù)來(lái)創(chuàng)建。watch 接受要監(jiān)聽的數(shù)據(jù)和一個(gè)回調(diào)函數(shù)，回調(diào)函數(shù)會(huì)在數(shù)據(jù)變化時(shí)被觸發(fā)。

import { ref, watch } from 'vue';
const myValue = ref(0);
watch(myValue, (newValue, oldValue) => {
  console.log(`myValue changed from ${oldValue} to ${newValue}`);
});

如何選擇

• 使用計(jì)算屬性當(dāng)你需要根據(jù)一個(gè)或多個(gè)響應(yīng)式數(shù)據(jù)派生出一個(gè)新的值，并希望充分利用 Vue 的緩存機(jī)制來(lái)提高性能。
• 使用監(jiān)聽器當(dāng)你需要在數(shù)據(jù)變化時(shí)執(zhí)行一些特定的操作，如副作用，或者當(dāng)你需要監(jiān)聽多個(gè)數(shù)據(jù)的變化時(shí)。

雖然計(jì)算屬性和監(jiān)聽器有不同的用途，但在實(shí)際開發(fā)中，你可能會(huì)根據(jù)具體的需求在不同場(chǎng)景中使用它們。

到此這篇關(guān)于Vue3.0監(jiān)聽器watch與watchEffect的文章就介紹到這了,更多相關(guān)Vue3.0監(jiān)聽器watch與watchEffect內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論