reactive 定義的響應式失效，如何解決？

問題描述：

使用 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]