vue3对象reactive()数据改变页面不刷新

问题vue3对象reactive()数据改变页面不刷新

首先定义一个对象

const tableData = reactive({ })
1

原因

调用后端接口赋值后页面不刷新
reactive生成的响应式数据属性
但是赋值后变成了普通数据
导致失去响应式
页面无法更新

解决方法

1.里面定义一个属性a并赋值给属性a

const tableData = reactive({ a: [] })
1

2.for of循环push到reactive数据，不破坏数据结构

const tableData = reactive()

const getData = async () => {
  let { data } = await http.get('/table');
  for (let i of data.data){
    tableData.push(i);
  }
  console.log(tableData);
}

getData()
1
2
3
4
5
6
7
8
9
10
11