情况简述: 初始化了一个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)