vue中生命周期里多个promise运行的问题？

作者站长头像
站长
· 阅读数 28

onActivated 和 onMounted 是 vue3 的生命周期，onMounted 是第一次打开会运行，onActivated 是跳转去时会执行，有一种场景下这两个生命周期都会运行，现在的问题是 await a() 在 onMounted 中运行时会有延时，所以有时候会在onActivated 执行时 onMounted 中的 await a() 还没执行完？这个问题怎么解决？

onActivated(async ()=>{
  await b()  
})
onMounted(async ()=>{
  await a()
})
回复
1个回答
avatar
test
2024-06-29
import { ref, onMounted, onActivated } from 'vue'

export default {
  setup() {
    const isAMounted = ref(false)

    onMounted(async () => {
      await a()
      isAMounted.value = true
    })

    onActivated(async () => {
      if (!isAMounted.value) {
        return
      }
      await b()
    })

    return {}
  }
}

2.

import { ref, onMounted, onActivated } from 'vue'

export default {
  setup() {
    let aPromiseResolve;
    const aPromise = new Promise(resolve => {
      aPromiseResolve = resolve;
    });

    onMounted(async () => {
      await a();
      aPromiseResolve();
    });

    onActivated(async () => {
      await aPromise;
      await b();
    });

    return {};
  }
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容