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)

你可能感兴趣的:(vue.js)