Vue3等待子组件安装完毕

Question

我想在渲染工具提示之前等待子组件安装。在等待时，我将有一个占位符显示给用户。

一个示例组件是：

<template>
   <div v-if="!mounted">Loading...</div>
   <child-component></child-component>
</template>
<script>
export default defineComponent({
   setup() {
       const mounted = ref(false);       

       return { 
           mounted
       } 
   }
});
</script>

经过研究，Vue2 似乎支持组件的生命周期挂钩，这会将上面的代码更改为：

<template>
   <div v-if="!mounted">Loading...</div>
   <child-component @hook:mounted="mountedCheck"></child-component>
</template>
<script>
export default {
export default defineComponent({
   setup() {
       const mounted = ref(false);       
       const mountedCheck = () = {
           mounted.value = true;
       }       

       return { 
           mounted, mountedCheck
       } 
   }
});
}

但是，我似乎无法开始@hook:mounted工作。Vue3 中是否有类似的东西，或者我错过了什么？

Answer 1

Vue3 中的语法发生了变化。现在您需要使用@vue:mounted而不是@hook:mounted. 有关详细信息，
请参阅Vue 3 迁移指南 - VNode 生命周期事件

另外，请记住，一些事件名称（例如destroyed和 ）在 Vue3 中beforeDestroy已分别重命名为unmounted和beforeUnmount