問題描述：

使用 reactive 包裝陣列響應式失效。

或： reactive 使用時響應式失效。我們通過 reactive 定義一個響應式陣列，網路請求返回的資料，賦值給陣列之後，頁面上的資料並沒有更新。

具體的程式碼：

const arr = reactive([]);
const load = () => {
  const res = [2, 3, 4, 5]; //假設請求介面返回的資料
  // 方法1 失敗，直接賦值丟失了響應性
  // arr = res;
  // 方法2 這樣也是失敗
  // arr.concat(res);
};

這是什麼原因呢？

原因：

方法1：arr = res 時，直接把一個 res 新陣列賦值給了 arr。reactive 宣告的響應式物件被 arr 代理，操作代理物件需要有代理物件的字首，此時的 res 直接把值賦值給了arr，使得 arr 失去了響應式。在vue3使用proxy，對於物件或陣列都不能直接將整個資料賦值。

使用方法2時，把 arr 直接當成一個數組，經過 reactive 包裝之後，arr 已經不是普通的陣列了，所以方法2也失效。

解決方案：

方案一：使用 陣列的 push 方法：

let list = reactive([])
let arr = [1, 2, 3]
arr.forEach((item) => { 
 list.push(item)
})

或

let list = reactive([])
let arr = [1, 2, 3]
list.push(...arr)

方案二：建立一個響應式物件，物件的屬性是陣列

let state = reactive({
  list: [],
})
let arr 
 
= [1,2,3]
state.list = arr

推薦使用該方法。

方案三：使用 ref 函式

const arr = ref([])
arr.value = [1, 2, 3]