Vue 程式札記 : watch 監聽器

在 Vue 中，watch是用於進行數據監聽的，可以用來響應式的監聽資料的變化並執行相應的操作。本文將介紹watch的功能，並透過實際範例讓你更好的理解。

watch 基本用法

watch是一種用於觀察和響應 Vue 組件中數據變化的功能，當你需要在某個數據變化時執行特定的操作時，就可以使用watch，它可以監聽 Vue 組件的數據變化，並在數據發生變化時執行相應的操作。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`count變更了，新的值為: ${newValue}, 舊的值為: ${oldValue}`);
    });

    function increment() {
      count.value++;
    }

    return { count, increment };
  },
};
</script>

在這個範例中，我們創建一個按鈕來讓用戶增加count的值，然後使用watch監聽count的變化。當count的值發生變化時，我們在控制台打印出新值和舊值。

監聽多個源

watch還可以同時監聽多個源，這在需要根據多個數據源的變化來執行操作的場景中非常有用。

<template>
  <div>
    <h1>Vue Watch Example</h1>
    <input v-model="firstName" placeholder="First Name">
    <input v-model="lastName" placeholder="Last Name">
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
import { ref, watch, computed } from 'vue';

export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');
    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
      console.log(`名字變更了，新的名字為: ${newFirstName} ${newLastName}, 舊的名字為: ${oldFirstName} ${oldLastName}`);
    });

    return { firstName, lastName, fullName };
  },
};
</script>

在這個範例中，我們使用了兩個input元素來讓用戶輸入名字和姓氏，並且使用了computed來實時顯示全名，當用戶修改輸入框中的值時，watch將會觸發並在控制台中打印出變化。

watch 深度監聽

有時候會需要監聽一個物件的深層變化，這時可以使用watch的deep。

<template>
  <div>
    <h1>Vue Deep Watch Example</h1>
    <input v-model="user.name" placeholder="Name">
    <input v-model="user.age" placeholder="Age" type="number">
    <input v-model="user.address.city" placeholder="City">
    <input v-model="user.address.country" placeholder="Country">
    <p>User Info: {{ user }}</p>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const user = ref({
      name: 'John',
      age: 30,
      address: {
        city: 'New York',
        country: 'USA',
      },
    });

    watch(user, (newUser, oldUser) => {
      console.log('用戶資訊變更了', newUser);
    }, {
      deep: true,
    });

    return { user };
  },
};
</script>

在這個範例中，我們替user物件中的每個屬性都提供了一個輸入框，讓用戶可以修改它們的值，由於我們在watch中設置了deep: true，所以即使是user.address中的屬性發生變化，我們也能夠在控制台中看到相應的日誌訊息。

停止監聽

有時候也會需要在某些條件下停止監聽，watch提供了一個停止監聽的函數，我們可以在需要的時候調用它。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">增加count值</button>
    <p v-if="watchStopped">停止監聽Count</p>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const watchStopped = ref(false);

    const stopWatch = watch(count, (newValue, oldValue) => {
      console.log(`count變更了，新的值為: ${newValue}, 舊的值為: ${oldValue}`);
    });

    // 在某個條件下停止監聽
    setTimeout(() => {
      stopWatch();
      watchStopped.value = true;
    }, 5000);

    const increment = () => {
      count.value++;
    };

    return { count, increment, watchStopped };
  },
};
</script>
chStopped };
  },
};
</script>

在這個範例中，我們使用了一個watchStopped變量來記錄是否已經停止了監聽，然後設定在5秒後停止了對count的監聽，當監聽被停止時，我們將watchStopped設置為true，並在頁面上顯示一條消息提示用戶監聽已經停止。

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡