Vue 3 生命周期钩子怎么处理全屏事件监听的生命周期管理-Vue.js-PHP中文网

全屏事件监听必须在onmounted中添加、onbeforeunmount中移除，使用具名函数确保准确解绑，并统一适配跨浏览器api差异。

vue 3 生命周期钩子怎么处理全屏事件监听的生命周期管理

全屏事件监听（如 fullscreenchange、fullscreenerror）属于全局浏览器事件，不绑定在某个 DOM 元素上，而是监听 document。若在 Vue 组件中注册这类监听器，必须严格匹配组件生命周期——否则容易出现内存泄漏、重复绑定或监听失效等问题。核心原则是：**在挂载时添加，在卸载前清除**。

onMounted 中添加全屏监听器

全屏状态变化由浏览器全局触发，必须等组件真实挂载后才能安全操作 document。此时 DOM 已就绪，且组件处于活跃状态：

使用 document.addEventListener('fullscreenchange', handler) 注册监听
可同时监听 fullscreenerror 处理进入全屏失败的情况
避免在 setup() 或 onBeforeMount 中注册——此时 DOM 尚未插入，document 虽可访问，但逻辑时机过早，易与 SSR 或服务端渲染冲突

onBeforeUnmount 中移除监听器

这是最关键的一步。组件销毁前必须解绑，否则监听器会持续存在，导致：

vue-admin-change-reviewer

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

下载

内存泄漏（闭包引用组件实例或响应式数据）
后续同名组件再次挂载时重复绑定，引发多次执行
页面级全屏状态变更时错误触发已销毁组件的逻辑

务必使用与注册时完全相同的函数引用（不能用箭头函数内联写法），推荐将处理函数声明为具名函数或用 ref 缓存：

示例写法：

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'，无需加前缀