全屏事件监听必须在onMounted中添加、onBeforeUnmount中移除，使用具名函数确保准确解绑，并统一适配跨浏览器API差异。
全屏事件监听（如 fullscreenchange、fullscreenerror）属于全局浏览器事件，不绑定在某个 DOM 元素上，而是监听 document。若在 Vue 组件中注册这类监听器，必须严格匹配组件生命周期——否则容易出现内存泄漏、重复绑定或监听失效等问题。核心原则是：**在挂载时添加，在卸载前清除**。
onMounted 中添加全屏监听器
全屏状态变化由浏览器全局触发，必须等组件真实挂载后才能安全操作 document。此时 DOM 已就绪，且组件处于活跃状态：
- 使用
document.addEventListener('fullscreenchange', handler)注册监听 - 可同时监听
fullscreenerror处理进入全屏失败的情况 - 避免在
setup()或onBeforeMount中注册——此时 DOM 尚未插入，document虽可访问，但逻辑时机过早，易与 SSR 或服务端渲染冲突
onBeforeUnmount 中移除监听器
这是最关键的一步。组件销毁前必须解绑，否则监听器会持续存在，导致：
- 内存泄漏（闭包引用组件实例或响应式数据）
- 后续同名组件再次挂载时重复绑定，引发多次执行
- 页面级全屏状态变更时错误触发已销毁组件的逻辑
务必使用与注册时完全相同的函数引用（不能用箭头函数内联写法），推荐将处理函数声明为具名函数或用 ref 缓存：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
立即学习“前端免费学习笔记（深入）”；
示例写法：const handleFullscreenChange = () => {
const isFullscreen = document.fullscreenElement !== null;
// 更新响应式状态或触发业务逻辑
};
onMounted(() => {
document.addEventListener('fullscreenchange', handleFullscreenChange);
});
onBeforeUnmount(() => {
document.removeEventListener('fullscreenchange', handleFullscreenChange);
});
注意跨浏览器兼容性与 API 差异
不同浏览器对全屏 API 的前缀和属性命名不一致，需统一适配：
- 触发全屏：优先用
element.requestFullscreen()（标准），降级到element.webkitRequestFullscreen()等 - 判断状态：用
document.fullscreenElement（标准），兼容document.webkitFullscreenElement、document.mozFullScreenElement - 监听事件名始终为
'fullscreenchange'和'fullscreenerror'，无需加前缀
避免在 onUpdated 或 onMounted 中反复注册
全屏监听器是**一次性全局监听**，不是随数据更新而重置的逻辑：
- 不要在
onUpdated中重复addEventListener——会导致监听器叠加 - 不要在
onMounted中每次调用都新建匿名函数并绑定——无法在卸载时准确解绑 - 若需根据 props 或状态动态启用/禁用监听，建议用开关变量控制内部逻辑，而非增删监听器
