Vue3 中若使用 reactive 來執行響應式操作，雖說可以達成監聽深層數據 ( 背後是用 Proxy ) 的目的，但一不小心就會讓響應式的功能失效。這邊筆記下避免的方法。
起因
使用者宣告一個響應式的陣列，如 reactive([])。當你後續從 API 中拿到資料，由於直接賦值會喪失響應式的行為，但在撰寫上並不直覺。
解法
1. 將響應式的外框保留，改變宣告方式。
2. 改用 ref 而不是 reactive，不過深層的物件監聽就得額外仰賴 watch。若你是從 Vue2 開始學習的，那你會覺得挺熟悉的。
3. 將 API 獲得的陣列先行解構後，再用 Array,push() 的方法傳入
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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) |
