reactive 和 ref 的解構

reactive() 回傳的是一個 Proxy 物件，它只有在透過 Proxy 取值時，Vue 才能追蹤依賴。

所以 —— 一旦你解構了裡面的屬性，就等於脫離了 Vue 的代理機制，響應性就斷了！

• 範例

import { reactive, watch } from 'vue'

const state = reactive({
  count: 0,
})

// 這樣是 reactive 的
watch(() => state.count, (val) => {
  console.log('count changed:', val)
})

// 解構會壞掉響應性
const { count } = state

watch(() => count, (val) => {
  console.log('這不會執行！count changed:', val)
})

• 發生什麼事？

const { count } = state 這行是把 count 的值「靜態複製」出來，不再受 state 的 Proxy 控制。

所以後面的 watch 完全監聽不到 state.count 的變化。

但，如果又重新接到響應式物件( ref, reactive)，則又會恢復自動更新顯示的功能。