怎么使用Vue?WatchEffect函數(shù)創(chuàng)建高級偵聽器

這篇文章主要介紹了怎么使用Vue WatchEffect函數(shù)創(chuàng)建高級偵聽器的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇怎么使用Vue WatchEffect函數(shù)創(chuàng)建高級偵聽器文章都會有所收獲，下面我們一起來看看吧。

WatchEffect高級偵聽器

在 Vue 3 中，我們可以使用 watchEffect 函數(shù)來創(chuàng)建高級偵聽器。與 watch 和 computed 不同，watchEffect 不需要指定依賴項，它會自動追蹤響應式狀態(tài)的變化，并在變化時重新運行。

使用 watchEffect 函數(shù)

下面是一個簡單的示例，使用 watchEffect 函數(shù)來偵聽一個響應式狀態(tài)，并在狀態(tài)變化時輸出一條消息：

import { reactive, watchEffect } from 'vue';
const state = reactive({
  count: 0,
});
watchEffect(() => {
  console.log(`Count is now: ${state.count}`);
});
// 改變狀態(tài)，輸出 Count is now: 1
state.count++;

在上面的示例中，我們使用 reactive 函數(shù)來創(chuàng)建一個響應式對象 state，并使用 watchEffect 函數(shù)來創(chuàng)建一個偵聽器。watchEffect 函數(shù)接受一個函數(shù)作為參數(shù)，這個函數(shù)會被自動運行，并在其中使用響應式狀態(tài)。當其中任何一個響應式狀態(tài)發(fā)生變化時，這個函數(shù)會被重新運行。

停止偵聽

與 watch 和 computed 不同，watchEffect 函數(shù)不會返回一個停止偵聽的函數(shù)。如果我們需要停止偵聽，我們可以將 watchEffect 的返回值設為 null，例如：

import { reactive, watchEffect } from 'vue';
const state = reactive({
  count: 0,
});
const stop = watchEffect(() => {
  console.log(`Count is now: ${state.count}`);
});
// 改變狀態(tài)，輸出 Count is now: 1
state.count++;
// 停止偵聽
stop();

在上面的示例中，我們將 watchEffect 的返回值保存到一個變量 stop 中，然后在需要停止偵聽時調用這個函數(shù)。

偵聽多個狀態(tài)

如果需要偵聽多個響應式狀態(tài)，我們可以在 watchEffect 函數(shù)中使用這些狀態(tài)，并在函數(shù)中返回一個計算值，例如：

import { reactive, watchEffect } from 'vue';
const state = reactive({
  count1: 0,
  count2: 0,
});
watchEffect(() => {
  const sum = state.count1 + state.count2;
  console.log(`Sum is now: ${sum}`);
});
// 改變狀態(tài)，輸出 Sum is now: 1
state.count1++;
// 改變狀態(tài)，輸出 Sum is now: 3
state.count2 += 2;

在上面的示例中，我們使用 reactive 函數(shù)創(chuàng)建一個響應式對象 state，并在 watchEffect 函數(shù)中使用了 state.count1 和 state.count2 兩個響應式狀態(tài)，然后計算了這兩個狀態(tài)的和，并輸出了這個和。

懶執(zhí)行

與 computed 類似，watchEffect 函數(shù)也支持懶執(zhí)行（lazy evaluation）。如果我們將 watchEffect 的第二個參數(shù)設置為 { lazy: true }，則這個函數(shù)會在第一次訪問響應式狀態(tài)時才會被運行，例如：

import { reactive, watchEffect } from 'vue';
const state = reactive({
  count: 0,
});
watchEffect(
  () => {
    console.log(`Count is now: ${state.count}`);
  },
  { lazy: true }
);
// 訪問狀態(tài)，輸出 Count is now: 1
state.count++;

在上面的示例中，我們將 watchEffect 的第二個參數(shù)設置為 { lazy: true }，然后在代碼中訪問了響應式狀態(tài) state.count。這時，watchEffect 中的函數(shù)才會被運行。

關于“怎么使用Vue WatchEffect函數(shù)創(chuàng)建高級偵聽器”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“怎么使用Vue WatchEffect函數(shù)創(chuàng)建高級偵聽器”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道。