2025-03-03-為什麼「ref 物件要改 .value，不能整個指派」

這牽涉到 Vue 3 中 ref 的本質與 reactivity（響應式）系統的運作方式。
我們來一步步說明為什麼「ref 物件要改 .value，不能整個指派」。

---

🔹 ref 是什麼？

當你這樣寫：

const allLocationNames = ref([])

你建立的是一個「包著值的物件」，它的結構像這樣：

{
  value: []
}

這個 .value 是 真正的值（陣列），Vue 的響應式系統就是在監聽 .value 的變化。

---

🧨 為什麼不能這樣寫？

allLocationNames = names  // ❌ 錯了！

這一行的意思是：

把 allLocationNames 整個變數，換成 names 陣列。

這就等於「你拋棄了原本的 ref 包裝」，Vue 也就無法追蹤變化，畫面不會更新。

---

✅ 正確寫法是：

allLocationNames.value = names

這表示：

「我保留這個 ref 物件，只改裡面的值」，這樣 Vue 就會自動幫你更新畫面。

---

🔁 小小比喻（超級好懂！）

假設：

• ref 是一個「透明果凍盒子」
• .value 是盒子裡面的水果

Vue 只會「盯著果凍盒子裡的水果變化」。
你要換水果（資料）時，應該把新的水果放進 .value 裡。

如果你整個盒子換掉（allLocationNames = names），Vue 會說：「我不知道你換盒子了，我只看我原本那盒」。

---

🟢 所以總結：

方式	用途	是否正確
ref([])	建立響應式資料	✅
allLocationNames.value = [...]	更新資料	✅
allLocationNames = [...]	拋棄 ref，變成普通變數	❌

---