vue 如何实现onshow
Vue 中实现类似 onShow 的生命周期
在 Vue 中没有直接的 onShow 生命周期钩子，但可以通过以下方法模拟类似功能：
使用 activated 钩子（配合 keep-alive）
当组件被 <keep-alive> 缓存时，可以使用 activated 钩子作为 onShow 的替代方案：
export default {
activated() {
// 当组件被激活时触发（相当于 onShow）
console.log('组件显示')
},
deactivated() {
// 当组件被停用时触发（相当于 onHide）
console.log('组件隐藏')
}
}通过路由变化监听
对于页面级组件，可以通过监听路由变化来实现：
export default {
watch: {
'$route'(to, from) {
if (to.matched.some(record => record.path === this.$route.path)) {
// 当前路由被激活时触发
console.log('页面显示')
}
}
}
}使用 visibilitychange 事件
监听浏览器标签页的可见性变化：
export default {
mounted() {
document.addEventListener('visibilitychange', this.handleVisibilityChange)
},
beforeDestroy() {
document.removeEventListener('visibilitychange', this.handleVisibilityChange)
},
methods: {
handleVisibilityChange() {
if (document.visibilityState === 'visible') {
console.log('页面可见')
} else {
console.log('页面隐藏')
}
}
}
}自定义指令实现
创建自定义指令来实现 onShow 功能：
Vue.directive('on-show', {
bind(el, binding) {
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
binding.value()
}
})
observer.observe(el)
}
})使用方式：
<div v-on-show="handleShow">内容</div>这些方法可以根据具体场景选择使用，keep-alive 的 activated 适用于组件缓存场景，路由监听适用于页面级组件，visibilitychange 适用于浏览器标签页切换场景，自定义指令适用于元素可见性检测场景。
