在我的项目中遇到一个问题,就是关上页面时,初始化数据总在更新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=3state.layoutX150state.layoutY280*******onBeforeUpdate******##############################以下是子组件中打印的信息,能够不关注*******setup in MyXgPlayer******props.layoutX=150props.layoutY=280*******onBeforeMount in MyXgPlayer*************setup in MyXgPlayer******props.layoutX=150props.layoutY=280*******onBeforeMount in MyXgPlayer*************onUpdated*************onMounted in MyXgPlayer**************onMounted in MyXgPlayer*******