摘要

watch() 可透過 deep: true 選項來偵聽物件內部的深層變化，並透過 immediate: true 選項讓偵聽器在建立時就立即以初始值執行一次回呼函式。

定義與說明

這兩個選項作為第三個參數傳入 watch：

deep: true：

預設情況下，watch 一個物件時，只有在物件參考本身被替換時才會觸發。設定 deep: true 後，watch 會遞迴地遍歷該物件，任何巢狀屬性的變化都會觸發偵聽器。（注意：直接偵聽 reactive 物件時，此選項預設為 true）。

immediate: true：

預設情況下，watch 的回呼函式只在資料第一次變化後才執行。設定 immediate: true 後，回呼函式會在偵聽器被建立時，立即以資料的初始狀態執行一次。

實作範例

Vue SFC

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

const settings = ref({ nested: { volume: 50 } });

// 使用 deep 和 immediate 選項
watch(settings, (newSettings) => {
  console.log('設定已更新:', newSettings);
}, {
  deep: true,      // 偵聽 settings.nested.volume 的變化
  immediate: true  // 立即以初始值執行一次
});
</script>

<template>
  <p>音量: {{ settings.nested.volume }}</p>
  <button @click="settings.nested.volume++">增加音量</button>
</template>

結論

deep 和 immediate 選項為 watch 提供了更強大的控制能力。deep 用於處理複雜巢狀資料的偵聽，而 immediate 則常用於需要在元件初始化時就根據初始資料執行一次邏輯的場景（如獲取初始資料）。

deep immediate 深度偵聽