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]