孙组件中onMounted()只调用一次导致打开数据为空解决方法

Q：A是B的父组件 B是C的父组件 在组件C中写一个onMounted方法 A打开B组件的时候C中的方法被调用一次 但是B打开C的时候没有调用onMounted方法 为什么

原因：件 C 被复用了（没有被销毁），所以它的 onMounted 没有再次触发。

B 组件中是这样引入 C 的：

<C v-if="showC" />

那么每次 showC = true 的时候，如果 C 组件之前没被销毁过，它的 onMounted 是不会再触发的。

🧨 常见场景：
✅ A 打开 B，B 中 C 首次加载 → onMounted 触发 ✅
❌ 之后只是在 B 里切换 tab 或 show/hide C → 没有销毁 → onMounted 不再触发 ❌

解决方法：
方式一、

当你把 showC 从 true 改为 false，再设回 true，组件会重新挂载，onMounted 会再次触发。
方式二：改用 onActivated（适用于 keep-alive）
如果你用了 ，组件不会被销毁，那么你可以在 onActivated 中处理逻辑：

import { onActivated } from 'vue';

onActivated(() => {
  console.log("组件被激活了");
});

方式三：watch 来代替 onMounted 的部分逻辑
比如你监听一个 prop 或某个状态变化，每次变化时就执行逻辑，不依赖生命周期：

watch(() => props.visible, (val) => {
  if (val) {
    queryData();
  }
});

我的办法：
在B打开C时调用C暴露的方法
在方法中加上查询操作

  const open = (row: any = {}) => {
    ...
    queryData();
  };

暴露给B

  defineExpose({ open, queryData });