Vue3什么时候不会触发onMounted生命周期钩子？

在 Vue 3 中，onMounted 的核心含义是：组件已经"挂载"到了浏览器真实的 DOM 树上。

简单来说，就是"组件已经正式登台亮相了"。

如果 onMounted 没有触发，通常是因为组件根本没机会登台 ，或者之前已经登台过并赖在台上没走。以下是几种常见的情况：

1. 被 v-if="false" 拦在门外

这是最常见的原因。

• 原理 ：v-if 是"真·条件渲染"。如果条件是 false，Vue 压根就不会创建这个组件的 DOM 元素，组件连"出生"的机会都没有，自然不会"挂载"。
• 对比 ：v-show="false" 只是把 CSS 设为 display: none，组件其实已经挂载了，所以 onMounted 会触发。

<!-- ❌ onMounted 不会触发 -->
<MyComponent v-if="false" />

<!-- ✅ onMounted 会触发 (只是看不见) -->
<MyComponent v-show="false" />

2. 被 <KeepAlive> 缓存了 (第二次进入时)

如果你用了 <KeepAlive> 包裹组件（常见于 Tab 切换或路由视图）：

• 第一次进入 ：组件初始化，onMounted 会触发。
• 切走再切回来 ：组件被缓存了，没有被销毁，也没有重新挂载。此时 onMounted 不会再次触发。
• 怎么办 ：这种情况你应该用 onActivated 钩子。

// 在 KeepAlive 内部的组件中
onMounted(() => {
  console.log('只有第一次进来才打印');
});

onActivated(() => {
  console.log('每次切回来都会打印');
});

3. 服务端渲染 (SSR) 环境

如果你的项目使用了 Nuxt.js 或者 Vite SSR：

• 原理 ：onMounted 是浏览器独有 的生命周期（因为它涉及到 DOM 操作）。在 Node.js 服务器端执行渲染时，服务器没有 DOM，所以它只执行 setup，绝不会执行 onMounted。
• 注意 ：如果你在 onMounted 之外（比如直接在 setup 根作用域）写了 window 或 document 相关的代码，在 SSR 模式下会直接报错。

4. 在 setup 或 onBeforeMount 阶段报错了

如果组件在"化妆间"（setup）或者"候场区"（onBeforeMount）就发生了代码错误（抛出异常）：

• 结果 ：Vue 渲染进程中断，组件挂载失败，onMounted 自然也就无法到达。

5. 异步组件加载失败

如果你使用了 defineAsyncComponent 配合 <Suspense>，但异步组件加载超时或失败，且你渲染了 error 插槽的内容，那么目标组件的 onMounted 就不会触发。

---

总结：排查思路

如果代码里的 onMounted 没跑，按这个顺序查：

1. 查 v-if：是不是父组件把它关掉了？
2. 查 <KeepAlive> ：是不是之前已经加载过一次了？
3. 查控制台报错：是不是前面代码写挂了？
4. 查环境：是不是代码跑在服务端（SSR）？