前端技术 php/thinkphp
vue3中onMounted与onActivated中代码执行顺序的问题?
2023-08-02 09:20 by intrwins 354 0

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 春藤建站-chunten All Rights Reserved
备案号:豫ICP备20020705号-2 请在后台设置"网站信息"设置"公网安备" 51LA统计
0.266230s