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> 缓存，onBeforeUnmount 不会触发。此时应：
- 监听
deactivated钩子暂停播放、释放部分资源（如暂停音频、清空缓冲） - 监听
activated钩子恢复播放状态（不重新 create，只 resume） - 仍保留
onBeforeUnmount处理最终销毁逻辑，覆盖非缓存路径
