2025-01-05 watch_deep-true

發表於 閱讀次數：
2025-01-05 watch_deep-true

2025-01-05 watch_deep-true

deep: true

當然可以，我來逐行說明這句：

1
watch([members, expenses, defaultExpenseItems], saveToLocalStorage, { deep: true })

這是 Vue 3 Composition API 中的 watch() 函式，用來「監聽變數變化」並做出反應。

🔍 各部分解釋：

✅ watch(...)

Vue 的函式，會監聽你指定的資料，當它們的值變了，就會自動執行你給的函式。

✅ [members, expenses, defaultExpenseItems]

這是「要被監聽的資料清單」，意思是：

  • 只要 members 有變化（新增/刪除/修改人）
  • 或 expenses 有變化（新增/刪除支出）
  • 或 defaultExpenseItems 有變化（新增支出項目）

任何一個變了，就會觸發 saveToLocalStorage()。

✅ saveToLocalStorage

這是你定義的函式，用來把資料存到 localStorage：

1
2
3
4
5
function saveToLocalStorage() {
  localStorage.setItem('splitBill_members', JSON.stringify(members.value))
  localStorage.setItem('splitBill_expenses', JSON.stringify(expenses.value))
  localStorage.setItem('splitBill_defaultItems', JSON.stringify(defaultExpenseItems.value))
}

✅ { deep: true }

這表示「深層監聽」：

  • 不只監控陣列本身是否改變（例如整個重新指定）
  • 也會監控陣列 裡面 的物件有無變動（例如你改了某位成員的名字）

如果你不寫 deep: true，Vue 只會監聽「變數整個被替換」的情況，不會監聽物件內部的內容變化。

✅ 小結：

這一句就是在說：

「只要 members、expenses 或 defaultExpenseItems 中任一資料有變動，不論是陣列變了、還是物件內容改了，就會自動呼叫 saveToLocalStorage() 去把資料儲存到 localStorage。」

如果你想試試看，可以在畫面中加入一個 console log，例如：

1
2
3
4
function saveToLocalStorage() {
  console.log('資料有變動，儲存中...')
  // ...
}

這樣只要一動資料，就會在 console 中看到訊息 😊

有需要我幫你示範怎麼加 deep: false 的效果比較嗎？

對，你目前的程式只有「新增成員」和「點選成員」，沒有提供編輯（修改）成員名字的功能。

不過你用 deep: true 是對的，因為未來你可能會：

  • 修改成員的名字
  • 增加欄位，例如記錄誰付了錢、有多少餘額等等
  • 修改支出的某些欄位（例如改支出金額或名稱）

這些都牽涉到 物件內部的變化，如果沒有 deep: true，Vue 是偵測不到這些變化的，watch() 就不會觸發。

✅ 你可以這樣理解：

有沒有 deep: true 可以偵測的變化
❌ 沒有 deep 只能偵測 members = [...] 這種「整個換掉」
✅ 有 deep: true 可以偵測 members[0].name = "小王" 這種「內部改變」

雖然你「目前」沒有修改功能，但你選用 deep: true 是個好習慣，讓系統 一開始就為將來的擴充做準備。

如果你想，我可以幫你加一個「點擊成員名字可以修改」的功能，順便實際示範 deep 的用途？