在我的项目中遇到一个问题,就是关上页面时,初始化数据总在更新 updated 周期后才执行,显示的不正确,须要在钩子函数中减少 async/await 同步申请
代码:
// 导入应用的 API
import {reactive, toRefs, getCurrentInstance,onBeforeMount, onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount, onUnmounted, watch,computed} from "vue"
export default{components: {xx},
props: {},
setup(props, context){console.log("*******setup******")
// 获取以后实例
const {ctx, proxy} = getCurrentInstance()
// 定义响应式 data 数据
const state = reactive({})
console.log("*******end reactive******")
// 定义方法
const methods = {async dealData(){
state.curStatus = statusFinished
await get(api).then((resData) => {console.log("state.layoutX"+state.layoutX)
console.log("state.layoutY"+state.layoutY)
})
},
// ***********async/await 实现申请同步性能 **************
async refreshData(){await get(api).then(resData=>{console.log("state.curStatus="+state.curStatus)
}).catch(()=>{//state.loading = false})
await methods.dealData()},
}
console.log("*******end methods******")
onBeforeMount(()=>{
// dom 挂载前
console.log("*******onBeforeMount******")
})
onMounted(async()=>{
//dom 挂载后
console.log("*******onMounted******")
state.collection_id = proxy.$route.query.id
await methods.init()})
onBeforeUpdate(()=>{
// 对响应式 data 数据有更新,更新前
console.log("*******onBeforeUpdate******")
})
onUpdated(()=>{
// 对响应式 data 数据有更新,更新后
console.log("*******onUpdated******")
})
onBeforeUnmount(()=>{
// 销毁页面组件前,即敞开
console.log("*******onBeforeUnmount******")
})
onUnmounted(()=>{
// 销毁后
console.log("*******onUnmounted******")
})
return {...toRefs(state),
...methods,
}
}
打印的后果如下
*******setup******
*******end reactive******
*******end methods******
*******onBeforeMount******
*******onMounted******
*******onBeforeUpdate******
*******onUpdated******
state.curStatus=3
state.layoutX150
state.layoutY280
*******onBeforeUpdate******
############################## 以下是子组件中打印的信息,能够不关注
*******setup in MyXgPlayer******
props.layoutX=150
props.layoutY=280
*******onBeforeMount in MyXgPlayer******
*******setup in MyXgPlayer******
props.layoutX=150
props.layoutY=280
*******onBeforeMount in MyXgPlayer******
*******onUpdated******
*******onMounted in MyXgPlayer*******
*******onMounted in MyXgPlayer*******