前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

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

在Vue開發中，mounted生命周期鉤子人盡皆知——但你是否知道存在一個更底層的 @vue:mounted 自定義事件？這個藏在官方文檔角落的特性，能解決傳統mounted無法觸達的精準監聽需求，卻鮮少被開發者發掘。

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

在Vue 3的自定義事件系統中，每個組件實例會內置觸發與生命周期同名的自定義事件。這意味著：

<!-- 父組件監聽子組件的底層掛載事件 -->
<ChildComponent @vue:mounted="handleChildMounted" />

與傳統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

關鍵注意事項

• 執行順序的魔法

<Child 
  @vue:mounted="console.log('父組件監聽事件')" 
  ref="childRef"
/>

控制臺輸出順序：

子組件mounted鉤子執行

父組件監聽的@vue:mounted觸發

父組件ref變為可用

• Vue 2兼容方案Vue 2中對應事件名為 @hook:mounted

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

• 避免濫用警告在99的場景下，以下方案更簡潔：

<!-- 標準通信方式 -->
<Child @ready="handleReady" />

// 子組件內部
mounted() {
  this.$emit('ready')
}

何時應該祭出這個黑科技？

尤雨溪的隱晦提示：在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>