一、使用reactive函数声明数组如何正确赋值
　　需求：将接口请求到的列表数据赋值给响应数据 array

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);
  });
};

问题原因：这是因为 arr = newArr这行代码让arr失去了响应式。vue3 使用proxy，对于对象和数组都不能直接整个赋值。

具体原因：reactive声明的响应式对象被 arr 代理，操作代理对象需要有代理对象的前缀，直接覆盖会丢失响应式。

方法2为什么不行？只有push或者根据索引遍历赋值才可以保留reactive数组的响应性？如何方便的将整个数组拼接到响应式数据上？下面我们看下解决方案：

// 这几种办法都可以触发响应性，推荐第一种
// 方案1：创建一个响应式对象，对象的属性是数组
const state = reactive({
    arr: []
});
state.arr = [1, 2, 3]

// 方案2: 使用ref函数
const state = ref([])
state.value = [1, 2, 3]

// 方案3: 使用数组的push方法
const arr = reactive([])
arr.push(...[1, 2, 3])