@vue:mounted 是什么

前几天在网上浏览，突然发现一段代码，一个动态组件，其中组件上有这个事件，从@vue开头看出来，这个标签不简单，去文档上一顿找，无果。

在搜索引擎的加持下，终于找到了解释：

在父组件中直接监听子组件的生命周期

于是我写了一个代码来测试，

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
const onHelloMounted = () => {
  console.log("hello world mounted");
};
</script>

<template>
  <div>
    <HelloWorld msg="hello world" @vue:mounted="onHelloMounted" />
  </div>
</template>

<style scoped></style>

 确实会执行，那么与子组件的生命周期的先后顺序呢，来试一下

 顺序可以清楚的看楚，子组件的生命周期执行完毕，父组件中的监听才会接到回调，

那他的实际作用有哪些呢，

思来想去，可能只有一些细粒度的组件化拆分控制或者上报才能用到，而且这个是一个实验性的功能，不建议用到生产环境

• ✅ 这个功能确实存在且能用
• ❌ 但官方不保证稳定性
• ⚠️ 可能在未来版本中被移除