当前位置：首页 > VUE

vue 如何实现onshow

2026-03-09 12:20:07VUE

在 Vue 中实现类似 onShow 的生命周期钩子（常见于小程序或原生应用），可以通过以下方法模拟或监听组件的显示状态：

使用 `v-if` 或 `v-show` 结合生命周期

通过 v-if 或 v-show 控制组件显隐时，Vue 的生命周期钩子会触发不同的行为：

v-if：当条件为 true 时，会触发 mounted 和 activated（若组件被 <keep-alive> 包裹）。
v-show：仅切换 CSS 的 display 属性，不会触发生命周期钩子。

<template>
  <div v-if="isVisible">内容</div>
</template>

<script>
export default {
  data() {
    return { isVisible: false };
  },
  mounted() {
    this.isVisible = true; // 触发显示逻辑
  },
  activated() {
    // 若组件被 <keep-alive> 缓存，此钩子会在显示时触发
    console.log('组件显示');
  }
};
</script>

监听路由变化

若需在页面级别实现 onShow，可通过 Vue Router 的导航守卫或 watch 监听路由变化：

export default {
  watch: {
    '$route'(to, from) {
      if (to.path === '/当前路径') {
        console.log('页面显示');
      }
    }
  }
};

自定义事件或状态管理

通过全局事件总线或状态管理（如 Vuex）传递显示状态：

// 父组件
this.$emit('show-component', true);

// 子组件
export default {
  created() {
    this.$on('show-component', (isVisible) => {
      if (isVisible) {
        console.log('组件显示');
      }
    });
  }
};

使用 Intersection Observer API

监听元素是否进入视口（适用于滚动或懒加载场景）：

vue 如何实现onshow

export default {
  mounted() {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        console.log('元素可见');
      }
    });
    observer.observe(this.$el);
  }
};