vue3页面渲染时：子组件请求api获取数据没有正常更新到界面问题

项目场景：

子组件在页面渲染的时候需要调用api获取数据并更新到页面

问题描述

页面渲染时完成没有报错，但子组件的数据没有在页面显示；
错误代码：
onMounted(async () => {
await infoListAPI({ deviceCode: ‘’ }).then((res: any) => {
if (res.data && res.data.length) {
deviceData = res.data;
}
})
})

原因分析：

异步问题，无论是在父组件onBeforeMount、onMounted或是子组件onMounted上使用async、await均没有正确更新到页面；

解决方案：

添加Object.assign(deviceDataReactive, res.data);在请求完成之后触发更新，infoListAPI是自己的api接口
onMounted(async() => {
await infoListAPI({ deviceCode: ‘’ }).then((res: any) => {
if (res.data && res.data.length) {
// 合并源对象的属性到目标响应式对象上，Vue 的响应式系统能够检测到这些属性的变化，并触发相应的更新
Object.assign(deviceDataReactive, res.data);
// deviceDataReactive = res.data;
}
})
});