在 Vue3 中，父组件不能直接“监听”子组件生命周期钩子（不像 DOM 事件那样天然可监听），但可以通过几种设计模式间接感知或控制子组件生命周期阶段。

本质上，这是一个 组件通信 + 生命周期暴露策略 的问题。

一、子组件主动通知（emit 事件）

思想

生命周期属于子组件内部行为，因此应由 子组件在生命周期中主动向父组件发送事件。

子组件

复制
1<script setup>
2import { onMounted, onUnmounted } from 'vue'
3
4const emit = defineEmits(['mounted', 'unmounted'])
5
6onMounted(() => {
7  emit('mounted')
8})
9
10onUnmounted(() => {
11  emit('unmounted')
12})
13</script>

---

父组件

复制
1<Child
2  @mounted="handleChildMounted"
3  @unmounted="handleChildUnmounted"
4/>

复制
1function handleChildMounted() {
2  console.log('子组件已挂载')
3}

---

优点

• 符合 Vue 单向数据流
• 解耦
• 可维护性强
• 最符合组件设计哲学

这是 生产环境标准方案。

---

二、通过 ref + expose 访问子组件状态

如果父组件需要在某些时机判断子组件是否已经初始化，可以让子组件暴露状态。

---

子组件

复制
1<script setup>
2import { ref, onMounted } from 'vue'
3
4const ready = ref(false)
5
6onMounted(() => {
7  ready.value = true
8})
9
10defineExpose({
11  ready
12})
13</script>

---

父组件

复制
1<Child ref="childRef" />

复制
1const childRef = ref(null)
2
3watchEffect(() => {
4  if (childRef.value?.ready) {
5    console.log('子组件 mounted 完成')
6  }
7})

---

适用场景

• 父组件需要调用子组件方法
• 类似 imperative 控制（例如播放器、图表实例）

---

三、利用组件 VNode 生命周期（底层方式）

Vue 内部其实支持 vnode hook：

复制
1<Child
2  @vue:mounted="onMounted"
3  @vue:unmounted="onUnmounted"
4/>

---

示例

复制
1<Child @vue:mounted="handleMounted" />

---

注意

这是 Vue3 提供的 vnode 生命周期监听，很多人不知道。

可监听：

事件	含义
@vue:mounted	子组件挂载完成
@vue:updated	子组件更新
@vue:unmounted	子组件卸载

---

优点

• 无需改子组件代码
• 父组件直接监听

缺点

• 偏底层 API
• 可读性较弱
• 不适合复杂业务通信

---

四、Provide / Inject（跨层级监听）

当组件层级很深时：

子组件生命周期中修改 provide 的状态：

复制
1onMounted(() => {
2  injectedStore.childReady = true
3})

父组件监听该响应式状态。

适用于：

• 表单系统
• 编辑器
• 插件架构

---

五、不推荐方案（了解即可）

1️⃣ 直接访问内部实例

复制
1childRef.value.$.isMounted

问题：

• 依赖内部实现
• 非稳定 API
• 升级可能失效