vue3中onMounted与onActivated中代码执行顺序的问题?

onMounted第一次打开执行,
onActivated跳转到这个页面执行,
有一种情况,项目第一个打开,从别到页面跳转到这个页面时onMounted和onActivated会都执行,这时就会有一个问题,onMounted中的可能耗时长的会在onActivated执行时才执行完成,这时就出现了问题。这个问题怎么解决?

onActivated(async ()=>{
 
  
})onMounted(async ()=>{
  console.log('onMounted开始')
  await getPayType()
  await defaultDate()
  await getData()
  console.log("onMounted结束")
})

那你就把 onMounted 里的逻辑抽出来变成一个 Promise 就好了。

let p;onMounted(() => {
  p = new Promise(async (resolve, reject) => {    try {      await getPayType();      await defaultDate();      await getData();      resolve();
    } catch (err) {      reject(err);
    }
  });
})onActivated(() => {
  p.then(async () => {    // do something after `p` is completed
  });
})


复制内容

留言讨论


评论


乖,登录后才可以留言! 登录

广而告之

Copyright © 2020-2023 春藤技术,春藤建站 All Rights Reserved
备案号:豫ICP备20020705号 公网安备 51LA统计