vue3 遇到 reactive响应式失效问题记录

情况简述： 初始化了一个reactive的空数组，之后调用接口，将接口返回的数据赋值给这个reactive，此时发现页面数据并没有更新。（场景：ele-table的dataList）

const dataList = reactive([]);
const load = async () => {
  const res = await 接口函数（）; //假设请求接口返回的数据
  // 方法1 失败，直接赋值丢失了响应性
  // dataList = res;
  // 方法2 这样也是失败
  // dataList.concat(res);
};

原因：

直接把一个新的数组赋值给dataList,导致reactive声明的响应式对象由dataList代理

被新的数组所替代,因为在操作代理对象的时候需要有代理对象作为前提,所以失去了响应式

在vue3中不管是对象还是数组都不能直接将整个数据进行赋值，这样会造成reactive定义的响应式失效

就像对象的地址被替换，就不是原来的那个对象了

解决办法：

方法1：创建一个响应式对象，对象的属性是数组
let datalist = reactive({
  list: [],
})
let arr = [1,2,3]
datalist.list = arr

方法2：使用ref函数（ref可以创建任意数据类型，reactive只能创建对象或者数组）
const datalist = ref([])
datalist.value = [1, 2, 3]

方法3：数组的push
let datalist = reactive([])
let arr = [1, 2, 3]
arr.forEach((item) => { 
 datalist.push(item)
})
 
或
 
let datalist = reactive([])
let arr = [1, 2, 3]
datalist.push(...arr)