最近在使用vue3的组合式API，参照博主@MrBigShot的建议，自己写了几个hooks。其中一个函数返回的响应式对象无法解包，目前没有找到原因。具体代码如下：

在hooks.js文件中，我们使用Vue3的reactive来创建了tableData对象，并在getTableData函数中通过异步请求API获取数据并将其赋值给tableData。同时，我们也使用了ref来记录数据是否已全部加载完成，以及getTableData函数调用次数等信息。在setup函数中，我们导入了useGetTableData函数，并使用其中的getTableData来获取数据，将获取到的数据存放在list对象中。但是，在使用tableData.value.forEach(item => { list.value.push(item) })来遍历tableData中的数组项时，遍历一直失败，控制台中明明有数据。通过查找资料，我们发现这是因为时机问题，使用console.log打印的值并不是我们要的当前值，需要通过加上await来解决。代码实现如下：

export const useGetTableData = () => {
    // 将响应式对象的定义从reactive改为ref
    const tableData = ref([])
    //记录数据是否已全部加载完成
    const hasLoadALL = ref(false)
    //记录getTableData函数调用次数 默认初始化时返回第1页数据 前十条
    let page = 1
    const getTableData = async () => {
        let pageSize = 3
        //nums用来记录从哪个位置开始加载数据 初始时从位置0开始 也就是从第一条数据开始加载
        let nums = (page - 1) * pageSize
        console.log(nums, 'weizhi')
        //每次返回数据集的条数 默认10条
        const res = await axios.get('GetRecordList', {
            params: {
                nums,
                pageSize
            }
        })
        if (res.data.success) {
            //使用tableData.value来访问响应式对象的值
            tableData.value = JSON.parse(res.data.data)
            page++
        } else {
            hasLoadALL.value = true
        }
    }
    return {
        //使用toRefs将响应式对象的值解包后返回
        ...toRefs({
            tableData,
            hasLoadALL
        }),
        getTableData
    }
}
const onLoad = async () => {
    //使用await来等待获取到tableData的数据再进行处理
    await getTableData()
    console.log(tableData.value, '表格value')
    //使用tableData.value来访问响应式对象的值
    tableData.value.forEach(item => {
        list.value.push(item)
    })
    //...
}

同时，我们还可以将reactive改为ref，在使用响应式对象时需要使用toRefs进行解包后再使用。

最近在使用vue3的组合式API，参照博主@MrBigShot的建议，自己写了几个hooks。其中一个函数返回的响应式对象无法解包，可能是时机问题导致的。我们可以将reactive改为ref，同时使用await来等待数据获取，以及使用toRefs将响应式对象的值解包后返回，再进行遍历操作即可。