摘要

watch() 的第一個參數可以是一個由多個響應式來源組成的陣列，當陣列中任何一個來源發生變化時，都會觸發同一個回呼函式。

定義與說明

當你需要根據多個不同資料的變化，來執行同一個副作用時，可以將這些資料來源放入一個陣列中，作為 watch 的第一個參數。這樣，回呼函式接收到的 newValue 和 oldValue 也會是陣列，其順序與來源陣列一一對應。

實作範例

Vue SFC

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

const name = ref('Jake');
const age = ref(30);

// 同時偵聽 name 和 age
watch([name, age], ([newName, newAge], [oldName, oldAge]) => {
  console.log(`資料已改變:`);
  console.log(`姓名從 ${leftBrace}oldName${rightBrace} 變為 ${leftBrace}newName${rightBrace}`);
  console.log(`年齡從 ${leftBrace}oldAge${rightBrace} 變為 ${leftBrace}newAge${rightBrace}`);
});
</script>

<template>
  <p>姓名: <input v-model="name"></p>
  <p>年齡: <input v-model.number="age"></p>
</template>

結論

偵聽多個來源是組織程式碼的有效方式。它避免了為多個相關資料來源編寫重複的 watch 邏輯，讓程式碼更簡潔、意圖更清晰。

watch 多個來源陣列