什么是watch屬性

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

使用 watch 的基本語法：

在組合式 API 中，你可以使用 watch 函數(shù)來監(jiān)聽一個響應(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ù)接受兩個參數(shù)：要監(jiān)聽的響應(yīng)式數(shù)據(jù)和回調(diào)函數(shù)。每當(dāng) myValue 的值變化時，回調(diào)函數(shù)就會被觸發(fā)。

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

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

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}`);
});

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

停止監(jiān)聽：

watch 函數(shù)返回一個 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();

即時調(diào)用

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

以下是一個使用 watch 的例子，演示了如何使用 immediate: true 實(shí)現(xiàn)即時回調(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 的第三個參數(shù)是一個選項對象，通過 { immediate: true } 設(shè)置了立即執(zhí)行回調(diào)。因此，當(dāng) myValue 的值發(fā)生變化時，watch 會立即執(zhí)行回調(diào)函數(shù)。

深度監(jiān)聽：

你可以使用 watch 的第三個參數(shù)來進(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 });

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

注意事項：

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

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

watchEffect

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

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

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

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

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

下面是一個簡單的使用示例：

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

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

watch VS watchEffect

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

watchEffect

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

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

無需清理： watchEffect 返回一個無需手動停止的函數(shù)，當(dāng)組件卸載時，Vue 會自動停止對響應(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)聽一個或多個數(shù)據(jù)，甚至可以監(jiān)聽計算屬性或深度偵聽對象。

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

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

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

選擇使用場景

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

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

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

計算屬性 (computed)

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

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

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

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

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

如何選擇

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

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

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

最新評論