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也失效。

解决方案：

方案一：创建一个响应式对象，对象的属性是数组（常用，推荐使用）

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

方案二：使用ref函数（常用，推荐使用）

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

方案三：使用数组的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)