Vue3中watchEffect偵聽器怎么使用

這篇文章主要介紹“Vue3中watchEffect偵聽器怎么使用”，在日常操作中，相信很多人在Vue3中watchEffect偵聽器怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue3中watchEffect偵聽器怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

watchEffect 偵聽器

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

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

• watchEffect 如果存在的話，組件初始化的時候就會自動自行一次，不需要像 watch 一樣設置立即執行。

• watch 每次回調之后是可以獲取到最新值和上一次的老值，但是 watchEffect 是拿不到的。

• watchEffect 不需要指定監聽的屬性，他會自動進行依賴收集，只要我們回調中使用了響應式的屬性，那么這些屬性在變更之后這個回調都會執行，不像 watch 只能監聽指定的屬性。

• 使用的時候也是需要引入。

• 記住一點哈， watch 可以代替 watchEffect，但是 watchEffect 不能替代 watch。

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

watchEffect 偵聽器使用

首先我們寫一個簡單的 watchEffect 偵聽器。

<template>
  <div>
    <h3>{{name}}</h3>
    <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>
    <h3>{{name}}</h3>
    <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>
    <h3>{{boy.age}}</h3>
    <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>
    <h3>{{boy.age}}</h3>
    <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>
    <h3>{{boy.age}}</h3>
    <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>

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

到此，關于“Vue3中watchEffect偵聽器怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！