Vue3中beforeUnmount与unmounted钩子未触发弹窗问题求助

首先明确：Vue3里beforeUnmount和unmounted并没有被废弃或重命名，这两个钩子完全有效，不触发的核心原因几乎都是组件没有被真正卸载，或者钩子的使用方式有误。以下是具体排查和解决步骤：

1. 确认组件是否被真正卸载 #

Vue的组件卸载必须是DOM被完全移除，常见误区是用v-show控制显示隐藏——v-show只是通过CSS隐藏元素，组件实例依然存在，不会触发卸载钩子。必须用v-if来触发组件的销毁/重建：

• 错误写法：<MyComponent v-show="isVisible" />
• 正确写法：<MyComponent v-if="isVisible" />

当你把isVisible设为false时，组件会被立即卸载，对应的钩子就会触发。

2. 检查钩子的写法是否正确 #

Options API 写法 #

直接在组件选项中定义钩子函数即可，无需额外导入：

<template>
  <div v-if="isMounted">测试组件</div>
  <button @click="isMounted = false">销毁组件</button>
</template>

<script>
export default {
  data() {
    return { isMounted: true }
  },
  beforeCreate() { alert('beforeCreate') },
  created() { alert('created') },
  beforeMount() { alert('beforeMount') },
  // 正确定义卸载钩子
  beforeUnmount() { alert('beforeUnmount') },
  unmounted() { alert('unmounted') }
}
</script>

Composition API 写法 #

在<script setup>中必须先导入对应的钩子函数，再调用：

<template>
  <div v-if="isMounted">测试组件</div>
  <button @click="isMounted = false">销毁组件</button>
</template>

<script setup>
import { ref, onBeforeCreate, onCreated, onBeforeMount, onBeforeUnmount, onUnmounted } from 'vue'

const isMounted = ref(true)

onBeforeCreate(() => alert('onBeforeCreate'))
onCreated(() => alert('onCreated'))
onBeforeMount(() => alert('onBeforeMount'))
// 正确使用卸载钩子
onBeforeUnmount(() => alert('onBeforeUnmount'))
onUnmounted(() => alert('onUnmounted'))
</script>

3. 排查是否被<keep-alive>包裹 #

如果你的组件被<keep-alive>包裹，组件切换时不会触发卸载钩子，而是触发deactivated钩子。只有当组件被从keep-alive缓存中移除（比如超过缓存上限，或者主动调用销毁逻辑）时，才会触发beforeUnmount和unmounted：

• 不需要缓存的话，直接去掉<keep-alive>即可
• 若需要缓存，可监听deactivated钩子替代，或者通过include/exclude控制缓存范围

总结 #

按以下顺序排查：

• 改用v-if控制组件的显示/销毁，替代v-show
• 检查钩子函数的写法（Composition API需导入，Options API直接定义）
• 确认组件没有被<keep-alive>包裹，或调整缓存逻辑

按以上步骤操作后，beforeUnmount和unmounted钩子应该能正常触发alert弹窗。

内容的提问来源于stack exchange，提问作者Samuel M.