Vue的@vue:mounted，我相信90%的人都没有用过吧

在Vue开发中，mounted生命周期钩子人尽皆知——但你是否知道存在一个更底层的 @vue:mounted 自定义事件？这个藏在官方文档角落的特性，能解决传统mounted无法触达的精准监听需求，却鲜少被开发者发掘。

---

🔍 神秘事件：@vue:mounted是什么？

在Vue 3的自定义事件系统中，每个组件实例会内置触发与生命周期同名的自定义事件。这意味着：

<!-- 父组件监听子组件的底层挂载事件 -->
<ChildComponent @vue:mounted="handleChildMounted" />

与传统mounted钩子的本质区别：

特性	@vue:mounted  事件	mounted  钩子
触发位置	父组件  监听子组件挂载	子组件内部  自身挂载时
执行时机	子组件挂载完成后立即触发	子组件自身挂载过程中
监听对象	可监听任意子组件挂载	仅监听自身挂载
文档可见性	隐藏特性（官方文档无直接说明）	核心文档明确说明

官方源码佐证（packages/runtime-core/src/componentEmits.ts）：

const emittedEvents = [
  'vue:beforeCreate', 'vue:created', 
  'vue:beforeMount', 'vue:mounted', // 这里!
  'vue:beforeUpdate', 'vue:updated',
  'vue:beforeUnmount', 'vue:unmounted'
]

🚀 颠覆认知的实战价值

场景1：精准监听第三方组件挂载

<el-table @vue:mounted="initTableLayout">
  <!-- Element Plus表格组件 -->
</el-table>

痛点解决：当第三方组件内部未暴露挂载回调时，无需修改源码即可捕获其渲染完成时机

场景2：动态组件加载追踪

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

优势：无论动态切换何种组件，统一捕获挂载事件，避免为每个组件单独写钩子

场景3：深度嵌套组件的挂载顺序控制

<!-- 父组件 -->
<Container @vue:mounted="loadNestedComponents">

<!-- 子组件Container内部 -->
<DeepChild v-if="parentMounted" />

执行顺序：
父容器挂载 → 触发@vue:mounted → 设置parentMounted=true → 渲染DeepChild

---

⚠️ 关键注意事项

1. 执行顺序的魔法

   <Child 
     @vue:mounted="console.log('父组件监听事件')" 
     ref="childRef"
   />
   

   控制台输出顺序：

• 子组件mounted钩子执行
• 父组件监听的@vue:mounted触发
• 父组件ref变为可用

2. Vue 2兼容方案
   Vue 2中对应事件名为 @hook:mounted

   <!-- Vue 2语法 -->
   <ChildComponent @hook:mounted="doSomething" />
   

3. 避免滥用警告
   在99%的场景下，以下方案更简洁：

   <!-- 标准通信方式 -->
   <Child @ready="handleReady" />
   
   // 子组件内部
   mounted() {
     this.$emit('ready')
   }
   

---

🌟 何时应该祭出这个黑科技？

使用场景	推荐方案
监听第三方库组件挂载	✅ @vue:mounted
动态组件加载追踪	✅ @vue:mounted
父子组件挂载顺序强控制	✅ @vue:mounted
普通父子组件通信	❌ 使用自定义事件
组件内部初始化逻辑	❌ 使用mounted钩子

尤雨溪的隐晦提示：
在Vue RFC文档的生命周期事件提案中曾提到：
"vue:mounted 这类事件是框架底层实现细节，除非需要与DOM库深度集成，否则用户通常不需要关心"

---

最后思考：为什么它值得被了解？

1. 框架底层认知
   理解@vue:mounted机制，等于掌握Vue生命周期事件的底层调度原理

2. 应急解决方案
   当遇到“必须在父层捕获子组件挂载”的诡异需求时，它是最后的救命稻草

3. 高级组件库开发
   开发复杂组件库时，可用于实现更精细的生命周期管控

<!-- 终极示例：组件加载追踪系统 -->
<template v-for="comp in dynamicComponents" :key="comp.id">
  <component 
    :is="comp.type" 
    @vue:mounted="() => trackLoad(comp.id)"
  />
</template>

---