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

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

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

let userHouseList = reative<HouseListInter>([])

在表单中使用

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

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

// 分页查询
const pageUserHouseList = () => {
    queryData.value.pageNum = currentPage.value
    queryData.value.pageSize = pageSize.value
    pageUserHouse(queryData.value).then((res) => {
        userHouseList = res.data.list
        total.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 有一些局限性：

1. 有限的值类型：它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number或 boolean这样的原始类型。

2. 不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失：

   let state = reactive({ count: 0 })
   
   // 上面的 ({ count: 0 }) 引用将不再被追踪
   // (响应性连接已丢失！)
   state = reactive({ count: 1 })

3. 对解构操作不友好：当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，我们将丢失响应性连接：

   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