onShow 是 Vue 3 中的一个生命周期钩子，在组件首次插入 DOM 时触发。使用时，在组件选项对象中声明即可。它常用于组件首次出现时执行数据获取、初始化订阅、执行视觉效果或动画等操作。与 beforeMount 和 mounted 的区别在于，onShow 仅在首次插入 DOM 时触发，而 beforeMount 在呈现前触发，mounted 在呈现并插入 DOM 后触发。
Vue 3 中使用 onShow
什么是 onShow？
onShow 是 Vue 3 引入的生命周期钩子，它将在组件首次被插入 DOM 时触发。
如何使用 onShow？
立即学习“前端免费学习笔记（深入）”；
在 Vue 3 中使用 onShow 非常简单，只需在组件的选项对象中声明它即可：
export default {
onShow() {
// 组件被插入 DOM 时执行的代码
}
};何时使用 onShow？
onShow 对于以下场景非常有用：
- 在组件首次出现时执行数据获取或操作
- 初始化订阅或定时器
- 执行与组件加载相关的视觉效果或动画
与 beforeMount 和 mounted 的区别
- beforeMount: 在组件呈现之前，但并未插入 DOM 时触发。
- mounted: 在组件完全呈现并插入 DOM 时触发。
- onShow: 在组件首次插入 DOM 时触发。
示例
下面是一个使用 onShow 来获取数据的示例：
export default {
onShow() {
this.fetchData();
},
methods: {
fetchData() {
// 获取数据并更新组件状态
}
}
}; 
