Vue3如何监听子组件挂载完成事件 替代Vue2的@hook:mounted写法

Vue3 已移除 Vue2 中支持的 @hook:mounted 形式的生命周期事件监听语法，以下是两种可直接替代的实现方案：

方案1：子组件主动触发事件（最推荐） #

适用于可修改子组件源码的场景，符合Vue3官方推荐的单向数据流规范：

<!-- 子组件代码 -->
<script setup>
import { onMounted } from 'vue'
const emit = defineEmits(['mounted'])

onMounted(() => {
  // 子组件挂载完成后向父组件抛出事件
  emit('mounted')
})
</script>

<!-- 父组件代码 -->
<template>
  <div v-if="!childMounted">Loading...</div>
  <child-component @mounted="childMounted = true"></child-component>
  <!-- 挂载完成后渲染你的Tooltip即可 -->
</template>
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const childMounted = ref(false)
</script>

方案2：绑定VNode生命周期钩子（无需修改子组件） #

适用于使用第三方组件、无法修改子组件源码的场景，效果和Vue2的@hook:mounted完全一致：

<template>
  <div v-if="!childMounted">Loading...</div>
  <!-- 直接绑定Vue3提供的VNode挂载钩子即可 -->
  <child-component @vnode-mounted="mountedCheck"></child-component>
</template>
<script setup>
import { ref } from 'vue'

const childMounted = ref(false)
const mountedCheck = () => {
  childMounted.value = true
}
</script>

• 除了@vnode-mounted外，Vue3还提供了@vnode-updated、@vnode-unmounted等钩子，可对应替代Vue2的@hook:updated、@hook:beforeDestroy等语法，触发时机和子组件自身生命周期完全一致，可满足等待子组件挂载完成后再渲染Tooltip的需求。

内容的提问来源于stack exchange，提问作者DreadedSlug