一文搞懂Vue3中watchEffect偵聽器的使用

Posted on by

上一節我們學習瞭 watch 偵聽器的基礎用法，用來監聽頁面數據的變化，那麼今天呢，我們來學習一下 watch 偵聽器的好兄弟 watchEffect 偵聽器。這個相對來說比較簡單，用的不是很多，當然瞭，根據自己的項目情況自行決定使用。這個就不詳細說瞭，簡單過一下子。

watchEffect 偵聽器

其實我覺得這個玩意兒哈，不用也罷，啊哈哈哈哈哈！

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

watch：顯示指定依賴源，依賴源更新時執行回調函數。
watchEffect：自動收集依賴源，依賴源更新時候重新執行自身。

  • watchEffect 如果存在的話，組件初始化的時候就會自動自行一次，不需要像 watch 一樣設置立即執行。
  • watch 每次回調之後是可以獲取到最新值和上一次的老值，但是 watchEffect 是拿不到的。
  • watchEffect 不需要指定監聽的屬性，他會自動進行依賴收集，隻要我們回調中使用瞭響應式的屬性，那麼這些屬性在變更之後這個回調都會執行，不像 watch 隻能監聽指定的屬性。
  • 使用的時候也是需要引入。
  • 記住一點哈， watch 可以代替 watchEffect，但是 watchEffect 不能替代 watch。

總結：能用 watch 就不要用 watchEffect。

watchEffect 偵聽器使用

首先我們寫一個簡單的 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 執行瞭");
    });

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

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

我們發現哈，我們一刷新頁面，控制臺直接打印瞭我們輸出的內容，所以說呢，watchEffect 組件一加載完就會執行。

watchEffect 監聽基本數據

我們看到，watchEffect 使用的時候並沒有設置監聽哪個參數，隻有一個回調函數，因為他會自動進行依賴收集，隻要我們回調中使用瞭響應式的屬性，那麼這些屬性在變更之後這個回調都會執行。

比如我們監聽 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>

我們在回調函數打印一下 name 的值。

watchEffect 監聽復雜數據

上面的案例是用來監聽一個基本數據，如果監聽一個對象呢？

其實也是一樣的哈。

<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>

上邊代碼呢，一個按鈕，每次點擊讓 boy 對象裡面的 age 加一操作，然後監聽一下 age 的新值

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

watchEffect 啥時候執行

上邊說過瞭哈，隻要我們回調中使用瞭響應式的屬性，那麼這些屬性在變更之後這個回調都會執行，不像 watch 隻能監聽指定的屬性。

啥意思呢，簡單理解一下，就是回調裡面使用瞭的話他就執行，沒用他就不執行。

就像上面的案例，修改 age 的時候，我們在回調裡面打印瞭 age，在回調裡面涉及到 age 瞭，他就會執行，如果我們這次不使用改變的 age，隻打印一句話，看一下能不能執行回調哈。

<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("執行瞭");
    });

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

刷新保存，點擊按鈕修改 age 的值，看一下控制臺有沒有打印 執行瞭 三個字。

明白那句話瞭嗎？知道什麼時候執行瞭吧？ OK。

關閉 watchEffect 監聽

假設，我們開始使用瞭 watchEffect 監聽，但是我現在不想讓他監聽瞭怎麼辦呢？其實超級簡單。

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

上邊我們不是創建一個 watchEffect 偵聽器瞭嗎？關閉隻需要調用一下就關瞭哈。

res()  // 關閉

下面看具體代碼。

<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()  // 關閉監聽

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

保存一下，點擊按鈕看效果。

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

到此這篇關於一文搞懂Vue3中watchEffect偵聽器的使用的文章就介紹到這瞭,更多相關Vue3 watchEffect偵聽器內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：