vue3如何保证父组件onbeforeamount执行完成之后才执行子组件onmounted

通过了解vue3的生命周期(可参考:https://www.cnblogs.com/ucdos/p/17765077.html) 可以知道，在没有异步处理的情况下，父组件的onbeforemount肯定是执行完之后才会执行子组件的onmounted。但是如果有异步调用呢？

// parent - 父组件
<template>
	<Child/>
</template>
<script setup lang="ts">
import Child from './Child/index.vue
onBeforeMount(async() => {
	console.log("parent nobeforemount start")
	//异步调用
	let result = await getList();
	console.log("parent onbeforemount over")
})
</script>

//child － 子组件
<template>
</template>
<script setup lang="ts">
onMounted(async() => {
	console.log("child component")
})
</script>

对于上面代码的执行顺序是:

parent nobeforemount start
child component
parent onbeforemount over

并不是期望看到的父组件onbeforemount完全执行完再执行子组件onmounted。

注意: await只能保证方法内部代码的顺序执行，那用promise then行不行呢？普通方法是可以的，但是对于生命周期钩子函数则没办法。

这时， 可在父组件加上v－if控制子组件的加载：

<Child v-if="ready"/>

//默认值设置为FALSE，表示不加载
const ready = ref(false)

然后在父组件中onbeforemount最后设置ready=true

onBeforeMount(async() => {
	console.log("parent nobeforemount start")
	//异步调用
	let result = await getList();
	console.log("parent onbeforemount over")
	ready.value = true
})