WatchEffect高級(jí)偵聽(tīng)器

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

使用 watchEffect 函數(shù)

下面是一個(gè)簡(jiǎn)單的示例，使用 watchEffect 函數(shù)來(lái)偵聽(tīng)一個(gè)響應(yīng)式狀態(tài)，并在狀態(tài)變化時(shí)輸出一條消息：

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ù)來(lái)創(chuàng)建一個(gè)響應(yīng)式對(duì)象 state，并使用 watchEffect 函數(shù)來(lái)創(chuàng)建一個(gè)偵聽(tīng)器。watchEffect 函數(shù)接受一個(gè)函數(shù)作為參數(shù)，這個(gè)函數(shù)會(huì)被自動(dòng)運(yùn)行，并在其中使用響應(yīng)式狀態(tài)。當(dāng)其中任何一個(gè)響應(yīng)式狀態(tài)發(fā)生變化時(shí)，這個(gè)函數(shù)會(huì)被重新運(yùn)行。

停止偵聽(tīng)

與 watch 和 computed 不同，watchEffect 函數(shù)不會(huì)返回一個(gè)停止偵聽(tīng)的函數(shù)。如果我們需要停止偵聽(tīng)，我們可以將 watchEffect 的返回值設(shè)為 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++;
// 停止偵聽(tīng)
stop();

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

偵聽(tīng)多個(gè)狀態(tài)

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

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)建一個(gè)響應(yīng)式對(duì)象 state，并在 watchEffect 函數(shù)中使用了 state.count1 和 state.count2 兩個(gè)響應(yīng)式狀態(tài)，然后計(jì)算了這兩個(gè)狀態(tài)的和，并輸出了這個(gè)和。

懶執(zhí)行

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

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

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

總結(jié)

watchEffect 函數(shù)是 Vue 3 中的一個(gè)新特性，它可以用來(lái)創(chuàng)建高級(jí)偵聽(tīng)器，自動(dòng)追蹤響應(yīng)式狀態(tài)的變化，并在變化時(shí)重新運(yùn)行。與 watch 和 computed 不同，watchEffect 不需要指定依賴項(xiàng)，它會(huì)自動(dòng)追蹤響應(yīng)式狀態(tài)的變化。如果需要停止偵聽(tīng)，我們可以將 watchEffect 的返回值設(shè)為 null。如果需要偵聽(tīng)多個(gè)響應(yīng)式狀態(tài)，我們可以在 watchEffect 函數(shù)中使用這些狀態(tài)，并在函數(shù)中返回一個(gè)計(jì)算值。watchEffect 函數(shù)也支持懶執(zhí)行（lazy evaluation），可以在第一次訪問(wèn)響應(yīng)式狀態(tài)時(shí)才會(huì)被運(yùn)行。

到此這篇關(guān)于Vue WatchEffect函數(shù)創(chuàng)建高級(jí)偵聽(tīng)器的文章就介紹到這了,更多相關(guān)Vue WatchEffect內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論