vue3中reactive數據被重新賦值后無法雙向綁定，使用reactive包裹數組如何正確賦值？

需求：將接口請求到的列表數據賦值給響應數據arr

const arr = reactive([]);

const load = () => {
  const res = [2, 3, 4, 5]; //假設請求接口返回的數據
  // 方法1 失敗，直接賦值丟失了響應性
  // arr = res;
  // 方法2 這樣也是失敗
  // arr.concat(res);
  // 方法3 可以，但是很麻煩
  res.forEach(e => {
    arr.push(e);
  });
};

vue3使用proxy，對於對象和數組都不能直接整個賦值。
使用方法1能理解，直接賦值給用reactive包裹的對象也不能這么做。

這是因為reactive數據被重新賦值后，原來數據的代理函數和最新的代理函數不是同一個，無法被觸發

 

 推薦第一種！

 

引自：

https://segmentfault.com/q/1010000038701322；

https://gudujian.blog.csdn.net/article/details/121961031