Vue3中watchEffect偵聽器如何使用

watchEffect 偵聽器

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

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

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

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

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

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

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

• 記得一點哈， watch 可以取代 watchEffect，但 watchEffect 不能取代 watch。

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

watchEffect 偵聽器使用

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

<template>
  <div>
    <h2>{{name}}</h2>
    <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>
    <h2>{{name}}</h2>
    <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>
    <h2>{{boy.age}}</h2>
    <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>
    <h2>{{boy.age}}</h2>
    <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()  // 关闭

下面看具體程式碼。

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

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

    res()  // 关闭监听

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

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

以上是Vue3中watchEffect偵聽器如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！