今天想和大家聊聊我在vue中的一个小发现——Vue3中的@vue:mounted。
偶然看到了这么一行代码：

<component :is="currentComponent" @vue:mounted="handleMounted" />。

我当时就纳闷了，这玩意儿看着眼熟，又在官方文档里找不到，难道是Vue3藏着掖着的神秘功能？
于是，我决定好好琢磨琢磨这个@vue:mounted。

初识@vue:mounted

简单来说，@vue:mounted是Vue3提供的一种监听组件生命周期事件的方式。它允许我们在父组件中监听子组件的挂载、更新和卸载等事件，而无需在子组件中添加任何额外的代码。这对于动态组件的管理非常有帮助。举个例子，假设我们有一个动态加载的组件，我们可以在父组件中这样使用：

<template>
  <div>
    <button @click="toggleComponent">切换组件</button>
    <component :is="currentComponent" @vue:mounted="onMounted" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

const currentComponent = ref(ComponentA)
const toggleComponent = () => {
  currentComponent.value = currentComponent.value === ComponentA ? ComponentB : ComponentA
}

const onMounted = (event) => {
  console.log('组件已挂载：', event.target)
}
</script>

在这个例子中，当我们切换组件时，父组件会监听到子组件的挂载事件，并执行相应的回调函数。

@vue:mounted的优势与局限

优势

• 集中管理：所有生命周期监听逻辑都在父组件中，方便统一管理，特别适合有多个动态子组件的场景。
• 无需修改子组件：不需要在每个子组件中添加事件触发代码，降低了维护成本。

局限

• 未文档化：Vue团队明确表示这个功能不是为用户应用设计的，可能随时被修改或移除。
• 适用场景有限：主要用于动态组件的生命周期管理，对于普通静态组件的场景，使用官方推荐的方式更为稳妥。

实际应用场景

动态组件加载监控

在实际开发中，我们常常需要动态加载组件，并在组件加载完成后执行一些操作。比如，我们有一个页面，用户可以点击按钮来切换不同的组件展示。我们可以使用@vue:mounted来监听组件的挂载事件，从而在组件加载完成后更新页面状态：

<template>
  <div>
    <button @click="loadComponentA">加载组件A</button>
    <button @click="loadComponentB">加载组件B</button>
    <div v-if="componentStatus">当前状态：{{ componentStatus }}</div>
    <component :is="currentComponent" @vue:mounted="handleMounted" @vue:updated="handleUpdated" @vue:beforeUnmount="handleBeforeUnmount" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

const currentComponent = ref(null)
const componentStatus = ref('')

const loadComponentA = () => {
  currentComponent.value = ComponentA
}
const loadComponentB = () => {
  currentComponent.value = ComponentB
}

const handleMounted = () => {
  componentStatus.value = '✅ 组件已挂载'
  console.log('组件已挂载')
}
const handleUpdated = () => {
  componentStatus.value = '