使用Vue.js 3 Composition API，在组件显示时触发一个事件

Question

我在我的应用程序中有一些组件，通过按钮和变量来显示/隐藏，例如v-show="variable"，按钮只是将这些变量设置为true/false，我将这些组件处理为网页，就像在不同页面上浏览网站一样。我想要的是在组件显示在页面上时调用一个函数的方法。比如，我要随机选择2个玩家开始一场比赛，当游戏的棋盘显示出来时，只有当玩家是2时，才会出现一条消息或者弹出一个警告，重要的是事件发生在那个实例中，而不是之前。我的想法是在组件的脚本部分有一个函数：

function something() { alert("hello"); }

然后找到一种方法来说：

当组件显示时 -> if (player == 2) { something(); }

我缺乏的是如何确定和处理"当组件显示时"这一部分。对我来说，最合适的逻辑似乎是使用onMounted、onRendered（我读到它只在开发环境下工作）和onActivated，但它们似乎不能正常工作/根本不工作。

Answer 1

我找到了一种方法。问题是：它与onMounted和v-if结合使用。我正在检查代码，看看是否可以使用v-if而不是v-show，我记得我故意选择使用v-show来处理我的组件，但也许在这种情况下改变一下不会有问题。