我在项目中遇到了一个问题，就是打开页面的时候显示不正确，在onMounted(数据挂载)中初始化的数据没有渲染出来。这是因为在onUpdated(updateddatadata))之前并没有发生数据重新赋值，而是在执行之后，需要在onMounted钩子函数中添加async/await；特别注意：在onMounted中，将API请求的数据赋值给responsivedata数据，建议只赋值一次代码：//ImportAPIusedimport{reactive,toRefs,getCurrentInstance,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,watch,computed}from"vue"exportdefault{components:{xx},props:{},setup(props,context){console.log("*******setup******")//获取当前实例const{ctx,proxy}=getCurrentInstance()//定义响应式数据dataconststate=reactive({})console.log("*********endreactive******")//定义方法constmethods={asyncdealData(firstResData){if(firstResData.status=="finished"){state.collection_data=firstResData.datastate.colection_id=firstResData.idawaitget(api+state.collection_id).then((resData)=>{state.layoutX=resData.xstate.layoutY=resData.yconsole.log("state.layoutX"+state.layoutX)console.log("state.layoutY"+state.layoutY)})}},//*************async/await实现请求同步功能**************asyncrefreshData(){awaitget(api).then(firstResData=>{console.log("state.curStatus="+firstResData.status)methods.dealData(firstResData)}).catch(()=>{})},}console.log("*******结束方法******")onBeforeMount(()=>{//console.log("*******onBeforeMount******")在dom挂载之前})onMounted(async()=>{//dom安装后console.log("*****onMounted******")state.collection_id=proxy.$route.query.idawaitmethods.init()})onBeforeUpdate(()=>{//响应式数据有更新，console.log("*******onBeforeUpdate******")更新前})onUpdated(()=>{//响应式数据有更新，更新后console.log("*******onUpdated******")})onBeforeUnmount(()=>{//Destroy页面组件前，关闭console.log("*******onBeforeUnmount******")})onUnmounted(()=>{//销毁后console.log("*******onUnmounted******")})return{...toRefs(state),...methods,}}打印结果如下*********setup*************结束反应**************结束方法**************onBeforeMount**************onMounted*************onBeforeUpdate**************onUpdated******state.curStatus=3state.layoutX150state.layoutY280********onBeforeUpdate******###############################下面是子组件打印的信息，可以忽略**********setupinMyXgPlayer******props.layoutX=150props.layoutY=280********MyXgPlayer中的onBeforeMount************MyXgPlayer中的设置*********props.layoutX=150props.layoutY=280*********MyXgPlayer中的onBeforeMount**************onUpdated**************onM在MyXgPlayer中装载******************on在MyXgPl中装载阿耶*******
