上一節(jié)我們學(xué)習(xí)了 watch 偵聽器的基礎(chǔ)用法，用來監(jiān)聽頁面數(shù)據(jù)的變化，那么今天呢，我們來學(xué)習(xí)一下 watch 偵聽器的好兄弟 watchEffect 偵聽器。這個(gè)相對(duì)來說比較簡(jiǎn)單，用的不是很多，當(dāng)然了，根據(jù)自己的項(xiàng)目情況自行決定使用。這個(gè)就不詳細(xì)說了，簡(jiǎn)單過一下子。

watchEffect 偵聽器

其實(shí)我覺得這個(gè)玩意兒哈，不用也罷，啊哈哈哈哈哈！

怎么說呢，你可以理解成 watch 和 watchEffect 這兩個(gè)玩意兒的功能是一樣的。

watch：顯示指定依賴源，依賴源更新時(shí)執(zhí)行回調(diào)函數(shù)。
watchEffect：自動(dòng)收集依賴源，依賴源更新時(shí)候重新執(zhí)行自身。

• watchEffect 如果存在的話，組件初始化的時(shí)候就會(huì)自動(dòng)自行一次，不需要像 watch 一樣設(shè)置立即執(zhí)行。
• watch 每次回調(diào)之后是可以獲取到最新值和上一次的老值，但是 watchEffect 是拿不到的。
• watchEffect 不需要指定監(jiān)聽的屬性，他會(huì)自動(dòng)進(jìn)行依賴收集，只要我們回調(diào)中使用了響應(yīng)式的屬性，那么這些屬性在變更之后這個(gè)回調(diào)都會(huì)執(zhí)行，不像 watch 只能監(jiān)聽指定的屬性。
• 使用的時(shí)候也是需要引入。
• 記住一點(diǎn)哈， watch 可以代替 watchEffect，但是 watchEffect 不能替代 watch。

總結(jié)：能用 watch 就不要用 watchEffect。

watchEffect 偵聽器使用

首先我們寫一個(gè)簡(jiǎn)單的 watchEffect 偵聽器。

<template>
  <div>
    <h1>{{name}}</h1>
    <button @click="btn">修改name</button>
  </div>
</template>

<script>
import { ref, watchEffect } from "vue";
export default {
  name: "App",
  setup() {
    const name = ref("我是????.");

    function btn() {
      name.value = "????.";
    }

    const res = watchEffect(() => {
      console.log("watchEffect 執(zhí)行了");
    });

    return { name, btn };
  }
};
</script>

記住 watchEffect 使用也是需要先引入的，不然不好使哈，然后我們保存上面的代碼，然后刷新頁面看一下執(zhí)行結(jié)果。

我們發(fā)現(xiàn)哈，我們一刷新頁面，控制臺(tái)直接打印了我們輸出的內(nèi)容，所以說呢，watchEffect 組件一加載完就會(huì)執(zhí)行。

watchEffect 監(jiān)聽基本數(shù)據(jù)

我們看到，watchEffect 使用的時(shí)候并沒有設(shè)置監(jiān)聽哪個(gè)參數(shù)，只有一個(gè)回調(diào)函數(shù)，因?yàn)樗麜?huì)自動(dòng)進(jìn)行依賴收集，只要我們回調(diào)中使用了響應(yīng)式的屬性，那么這些屬性在變更之后這個(gè)回調(diào)都會(huì)執(zhí)行。

比如我們監(jiān)聽 name 的情況。

<template>
  <div>
    <h1>{{name}}</h1>
    <button @click="btn">修改name</button>
  </div>
</template>

<script>
import { ref, watchEffect } from "vue";
export default {
  name: "App",
  setup() {
    const name = ref("我是????.");

    function btn() {
      name.value = "????.";
    }

    const res = watchEffect(() => {
      console.log(name.value);
    });

    return { name, btn };
  }
};
</script>

我們?cè)诨卣{(diào)函數(shù)打印一下 name 的值。

watchEffect 監(jiān)聽復(fù)雜數(shù)據(jù)

上面的案例是用來監(jiān)聽一個(gè)基本數(shù)據(jù)，如果監(jiān)聽一個(gè)對(duì)象呢？

其實(shí)也是一樣的哈。

<template>
  <div>
    <h1>{{boy.age}}</h1>
    <button @click="boy.age++">修改name</button>
  </div>
</template>

<script>
import { ref, watchEffect, reactive } from "vue";
export default {
  name: "App",
  setup() {
    const boy = reactive({
      name: "我是????.",
      age: 10
    });

    const res = watchEffect(() => {
      console.log(boy.age);
    });

    return { boy };
  }
};
</script>

上邊代碼呢，一個(gè)按鈕，每次點(diǎn)擊讓 boy 對(duì)象里面的 age 加一操作，然后監(jiān)聽一下 age 的新值

可以看到是完全沒有問題的哈！

watchEffect 啥時(shí)候執(zhí)行

上邊說過了哈，只要我們回調(diào)中使用了響應(yīng)式的屬性，那么這些屬性在變更之后這個(gè)回調(diào)都會(huì)執(zhí)行，不像 watch 只能監(jiān)聽指定的屬性。

啥意思呢，簡(jiǎn)單理解一下，就是回調(diào)里面使用了的話他就執(zhí)行，沒用他就不執(zhí)行。

就像上面的案例，修改 age 的時(shí)候，我們?cè)诨卣{(diào)里面打印了 age，在回調(diào)里面涉及到 age 了，他就會(huì)執(zhí)行，如果我們這次不使用改變的 age，只打印一句話，看一下能不能執(zhí)行回調(diào)哈。

<template>
  <div>
    <h1>{{boy.age}}</h1>
    <button @click="boy.age++">修改name</button>
  </div>
</template>

<script>
import { ref, watchEffect, reactive } from "vue";
export default {
  name: "App",
  setup() {
    const boy = reactive({
      name: "我是????.",
      age: 10
    });

    const res = watchEffect(() => {
      console.log("執(zhí)行了");
    });

    return { boy };
  }
};
</script>

刷新保存，點(diǎn)擊按鈕修改 age 的值，看一下控制臺(tái)有沒有打印 執(zhí)行了 三個(gè)字。

明白那句話了嗎？知道什么時(shí)候執(zhí)行了吧？ OK。

關(guān)閉 watchEffect 監(jiān)聽

假設(shè)，我們開始使用了 watchEffect 監(jiān)聽，但是我現(xiàn)在不想讓他監(jiān)聽了怎么辦呢？其實(shí)超級(jí)簡(jiǎn)單。

    const res = watchEffect(() => {
      console.log(boy.age);
    });

上邊我們不是創(chuàng)建一個(gè) watchEffect 偵聽器了嗎？關(guān)閉只需要調(diào)用一下就關(guān)了哈。

res()  // 關(guān)閉

下面看具體代碼。

<template>
  <div>
    <h1>{{boy.age}}</h1>
    <button @click="boy.age++">修改name</button>
  </div>
</template>

<script>
import { ref, watchEffect, reactive } from "vue";
export default {
  name: "App",
  setup() {
    const boy = reactive({
      name: "我是????.",
      age: 10
    });

    const res = watchEffect(() => {
      console.log(boy.age);
    });

    res()  // 關(guān)閉監(jiān)聽

    return { boy };
  }
};
</script>

保存一下，點(diǎn)擊按鈕看效果。

好了，watchEffect 偵聽器基本有法就這樣了，沒什么難的，所以說很多人都說，哎喲，這個(gè) watchEffect 沒什么屁用啊！確實(shí)用處不大，但是也不絕對(duì)哈，不然作者就不至于在 watch 之外有整一個(gè) watchEffect 了是吧！ 但是具體什么用，等你做項(xiàng)目過程中，就知道了！但是，能用 watch 解決的，就不要用 watchEffect ！

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

最新評(píng)論