当前位置：首页 > news >正文

Vue3:reactive丢失响应式，数据有更新但表单没有更新

news 来源：原创 2024/9/20 16:54:27

出现问题：数据有更新但表单没有更新

使用reative定义了一个数组对象

let userHouseList = reative<HouseListInter>([])

在表单中使用

    <el-table :data="userHouseList" stripe border style="width: 100%" height="500">

通过分页展示数据，分页查询会触发查询并将结果赋值给数组对象

// 分页查询
const pageUserHouseList = () => {queryData.value.pageNum = currentPage.valuequeryData.value.pageSize = pageSize.valuepageUserHouse(queryData.value).then((res) => {userHouseList = res.data.listtotal.value = res.data?.total})
}const handleSizeChange = (newSize: number) => {pageSize.value = newSize;pageUserHouseList();
};const handleCurrentChange = (newPage: number) => {currentPage.value = newPage;pageUserHouseList();
};

通过进行console.log输出，发现成功将查询的数据赋值了，但表单并没有更新。

解决：查看了官方文档，发现reative响应式存在局限

reative() API 有一些局限性：

有限的值类型：它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number或 boolean这样的原始类型。
不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失：
let state = reactive({ count: 0 })// 上面的 ({ count: 0 }) 引用将不再被追踪
// (响应性连接已丢失！)
state = reactive({ count: 1 })
对解构操作不友好：当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，我们将丢失响应性连接：
const state = reactive({ count: 0 })// 当解构时，count 已经与 state.count 断开连接
let { count } = state
// 不会影响原始的 state
count++// 该函数接收到的是一个普通的数字
// 并且无法追踪 state.count 的变化
// 我们必须传入整个对象以保持响应性
callSomeFunction(state.count)
由于这些限制，我们建议使用 ref() 作为声明响应式状态的主要 API。

使用ref可以解决
let userHouseList = ref<HouseListInter>([])
赋值的时候调用.value
userHouseList.value = res.data.list