vue 3 中音频/视频播放器资源释放需在 onbeforeunmount 钩子中调用 dispose() 或 pause() 并清空 src、移除事件监听、设引用为 null；onmounted 仅初始化且避免重复创建；keep-alive 下需配合 deactivated/activated 暂停与恢复。

Vue 3 中处理音频/视频播放器资源释放，核心在于在组件卸载前彻底销毁实例、移除监听、重置状态。不及时清理会导致音频继续播放、内存无法回收、重复初始化报错等问题。

onBeforeUnmount：必须执行播放器销毁

这是最关键的钩子。Video.js、HTMLMediaElement 或自定义音频对象都应在该阶段主动释放：

• 调用 player.dispose()（videojs-player）或 audio.pause(); audio.src = ''（原生 Audio）
• 手动清除通过 addEventListener 绑定的事件监听器（如 play、pause、ended）
• 将引用设为 null，切断响应式依赖链，帮助垃圾回收

onMounted：只做初始化，不埋隐患

挂载时创建播放器或音频对象是合理的，但要注意两点：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• 避免在 onMounted 中重复初始化（例如未判断 player 是否已存在）
• 所有事件监听器必须保存引用（如用具名函数），否则无法在 onBeforeUnmount 中精准移除
• 若使用 watch 监听 props 变化更新播放器配置，确保 watch 的回调中不触发重复 dispose

配合 reactive / ref 管理状态，防止残留引用

用 ref 存储播放器或 Audio 实例时，销毁后应显式赋值为 null：

• const player = ref(null) → 卸载时 player.value?.dispose(); player.value = null
• const audio = shallowRef(null) 更轻量，适合仅需单次引用的场景
• 避免将播放器存入 data() 或 reactive({}) 对象——深层响应式可能阻碍清理

特殊情况：keep-alive 下的音频/视频管理

若组件被 <keep-alive></keep-alive> 缓存，onBeforeUnmount 不会触发。此时应：

• 监听 deactivated 钩子暂停播放、释放部分资源（如暂停音频、清空缓冲）
• 监听 activated 钩子恢复播放状态（不重新 create，只 resume）
• 仍保留 onBeforeUnmount 处理最终销毁逻辑，覆盖非缓存路径

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！