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() {
// 获取数据并更新组件状态
}
}
};