摘要

watch() 用於「偵聽」一個特定響應式資料來源的變化，並在資料變化時，執行一個指定的副作用 (Side Effect) 函式，例如發起網路請求。

定義與說明

watch() 函數接收至少兩個參數：

來源 (Source)：

你想要偵聽的響應式資料，可以是一個 ref、reactive 物件、一個 getter 函數，或由它們組成的陣列。

回呼函式 (Callback)：

當來源變化時要執行的函式。這個函式會接收到新值 (newValue) 和舊值 (oldValue) 作為參數。

watch 關心的是變化的「過程」，並在過程中觸發一個「動作」；而 computed 關心的是變化的「結果」，並產出一個「新值」。

實作範例

Vue SFC

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

const question = ref('');
const answer = ref('請輸入問題...');

// 偵聽 question ref 的變化
watch(question, async (newQuestion, oldQuestion) => {
  if (newQuestion.includes('?')) {
    answer.value = '思考中...';
    // 模擬 API 請求
    setTimeout(() => {
      answer.value = '我想 Vue 是一個很棒的框架！';
    }, 1500);
  }
});
</script>

<template>
  <p>
    <input v-model="question" placeholder="輸入一個包含 '?' 的問題" />
  </p>
  <p>{{ answer }}</p>
</template>

結論

watch() 是執行響應式副作用的標準工具。當你需要在某個資料變化時，執行非同步操作或觸發一個與產生新值無關的動作時，就應該使用 watch。

watch 偵聽器副作用