Vue3异步请求获取数据在渲染时不显示的问题

Vue3异步请求获取数据在渲染时不显示的问题

获取对象数组

let goodmessagelist:IArticle[]= reactive([])

    onMounted(async()=>{
    
    
      let res = await posts() 
      /*
      这里不能直接goodmessagelist = res.rows
      */
      goodmessagelist.push(...res.rows)
    }),

参考：使用vue3中的异步

获取对象

/*刚开始我写的是let detailmessage= reactive({
            id: '',
            title: '',
            time: '',
            avatar: '',
            author: '',
            banner: '',
            likes: 0,
            comments: 0
        })
        然后在onMounted中打印有数据，在页面渲染时，
        使用detailmessage.属性名 得不到数据
        然后在外部有定义了一个属性名，通过detailmessage.message.属性名
        获取有数据
        */
let detailmessage= reactive({
    
     message:{
    
    
            id: '',
            title: '',
            time: '',
            avatar: '',
            author: '',
            banner: '',
            likes: 0,
            comments: 0
        }});

        onMounted(async () => {
    
    
            if (route.query.id != null || route.query.id != null) {
    
    
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-ignore
            messageid.value = route.query.id
            }
            let res = await detail(messageid.value)
            detailmessage.message = res.data
        })
        console.log(1111111)
        return {
    
    
            detailmessage
        }

参考：vue3中当用reactive()中定义的对象再次赋值，页面不会自动更新解决方法