vue2和vue3组件如何监听子组件生命周期

在 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 的组合式钩子，让父组件自动监听多个子组件的生命周期？