[筆記] Vue3 中 reactive 響應式操作陣列 array 的注意事項 @地瓜大的飛翔旅程

章節連結

起因
解法
參考資料

Vue3 中若使用 reactive 來執行響應式操作，雖說可以達成監聽深層數據 ( 背後是用 Proxy ) 的目的，但一不小心就會讓響應式的功能失效。這邊筆記下避免的方法。

起因

使用者宣告一個響應式的陣列，如 reactive([])。當你後續從 API 中拿到資料，由於直接賦值會喪失響應式的行為，但在撰寫上並不直覺。

解法

1. 將響應式的外框保留，改變宣告方式。
2. 改用 ref 而不是 reactive，不過深層的物件監聽就得額外仰賴 watch。若你是從 Vue2 開始學習的，那你會覺得挺熟悉的。
3. 將 API 獲得的陣列先行解構後，再用 Array,push() 的方法傳入

const arrayFromApi = [1,2,3]

// Method 1
let demoArray1 = reactive({'arr': []})
demoArray1.arr = arrayFromApi

// Method 2
const demoArray2 = ref([])
demoArray2.value = arrayFromApi

// Method 3
let demoArray3 = reactive([])
demoArray3.push(...arrayFromApi)