在 Vue 中监听子组件的生命周期是一个常见需求，但 Vue 官方并不直接推荐这么做，因为这会打破组件的封装性。但在**一些特定场景（如自动化监控、封装逻辑复用）**下仍是有意义的。
下面分别讲解 Vue 2 和 Vue 3 中如何监听 子组件的生命周期。
✅ Vue 2 中监听子组件生命周期
Vue 2 没有内建的方式监听子组件的生命周期，但可以用以下方式实现：
✅ 方法一：在子组件中使用 $emit 通知父组件
<!-- Child.vue -->
<template><div>子组件</div></template>
<script>
export default {mounted() {this.$emit('mounted')},destroyed() {this.$emit('destroyed')}
}
</script>
<!-- Parent.vue -->
<template><Child @mounted="onChildMounted" @destroyed="onChildDestroyed" />
</template><script>
import Child from './Child.vue'export default {components: { Child },methods: {onChildMounted() {console.log('子组件挂载了')},onChildDestroyed() {console.log('子组件被销毁了')}}
}
</script>
✅ 方法二：通过 ref 调用子组件方法（变通方案）
<Child ref="child" />
父组件中在 mounted 钩子中访问子组件：
mounted() {this.$refs.child.doSomething()
}
✅ Vue 3 中监听子组件生命周期
Vue 3 引入了 defineExpose，并支持 onMounted 等生命周期钩子组合式使用。监听子组件生命周期的方法如下：
✅ 方法一：事件方式（推荐）
<!-- Child.vue -->
<script setup>
import { onMounted, onUnmounted, defineEmits } from 'vue'const emit = defineEmits(['mounted', 'unmounted'])onMounted(() => emit('mounted'))
onUnmounted(() => emit('unmounted'))
</script>
<!-- Parent.vue -->
<template><Child @mounted="onChildMounted" @unmounted="onChildUnmounted" />
</template><script setup>
import Child from './Child.vue'function onChildMounted() {console.log('子组件挂载')
}function onChildUnmounted() {console.log('子组件卸载')
}
</script>
✅ 方法二：ref + expose（组合式 API）
<!-- Child.vue -->
<script setup>
import { onMounted, onUnmounted, ref } from 'vue'const status = ref('idle')
onMounted(() => {status.value = 'mounted'
})defineExpose({ status })
</script>
<!-- Parent.vue -->
<template><Child ref="childRef" />
</template><script setup>
import { onMounted, ref } from 'vue'
import Child from './Child.vue'const childRef = ref(null)onMounted(() => {console.log('子组件状态:', childRef.value?.status)
})
</script>
✅ 总结对比
| 方法 | Vue 2 | Vue 3 | 推荐用途 |
|---|---|---|---|
$emit 生命周期 | ✅ | ✅ | 监听子组件挂载/卸载（最通用） |
ref + expose | ❌ | ✅ | 访问子组件状态或方法 |
$refs + 方法调用 | ✅ | ✅ | 访问子组件实例（临时方案） |
是否需要我给你封装一个 useChildLifecycle 的组合式钩子，让父组件自动监听多个子组件的生命周期？
