Vue.js 3 Composition API：组件显示时触发事件的实现方案

因为v-show是通过CSS控制显示隐藏，组件从始至终都挂载在DOM中，所以你之前用的几个钩子都不适用：

• onMounted只会在组件首次挂载时执行一次，后续显示隐藏不会重复触发
• onRendered是Vue的开发调试API，生产环境无效
• onActivated仅当组件被<keep-alive>包裹时，激活状态才会触发，没包裹的话完全不起作用

给你几个靠谱的实现方案：

方案1：监听控制变量与player状态（最推荐） #

直接监听控制v-show的变量（比如showBoard）和player的变化，当两者同时满足条件时执行函数：

import { watch } from 'vue'

// 在组件的setup或script setup中
watch(
  () => [showBoard, player],
  ([newShowStatus, currentPlayer]) => {
    if (newShowStatus && currentPlayer === 2) {
      something()
    }
  },
  { immediate: true } // 可选：初始化时就检查一次状态
)

这个方案能覆盖所有触发组件显示的场景，不管是按钮点击还是其他逻辑修改showBoard，只要状态满足就会执行函数。

方案2：在切换显示的方法中直接判断 #

如果组件显示完全由按钮点击触发，可以在按钮的点击事件里直接做判断：

const toggleGameBoard = () => {
  showBoard = !showBoard
  // 显示时且player为2，执行函数
  if (showBoard && player === 2) {
    something()
  }
}

这种方式简单直接，但如果showBoard可能被其他逻辑修改，就会漏掉触发时机。

方案3：自定义指令监听元素显示状态 #

如果想把逻辑封装在组件内部，写个自定义指令监听元素的display变化：

// 定义自定义指令v-on-show
const vOnShow = {
  mounted(el, binding) {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.attributeName === 'style') {
          const isVisible = getComputedStyle(el).display !== 'none'
          if (isVisible) {
            binding.value()
          }
        }
      })
    })
    observer.observe(el, { attributes: true })
    el._observer = observer
  },
  unmounted(el) {
    el._observer.disconnect()
  }
}

// 在组件中使用
<GameBoard v-show="showBoard" v-on-show="() => player === 2 && something()" />

这个方案适合需要在组件层面独立处理显示触发逻辑的场景。

内容的提问来源于stack exchange，提问作者grimoiredark