Vue 3 中监听全屏状态需封装 useFullscreenState Hook 创建响应式 isFullscreen，注册 fullscreenchange 事件更新状态，并用 watch 或 watchEffect 驱动布局调整，配合 class 绑定与 DOM 更新时机优化体验。
Vue 3 中监听全屏状态变化并动态调整界面布局，核心在于两步：一是捕获浏览器原生的全屏切换事件（fullscreenchange），二是将该状态转化为响应式数据，再用 watch 或 watchEffect 驱动布局逻辑。不依赖第三方库，纯组合式 API 即可完成。
监听浏览器全屏事件并暴露响应式状态
全屏状态不是 Vue 自身响应式系统的一部分，需手动桥接。推荐封装一个基础 Hook（如 useFullscreenState）：
- 用
ref创建isFullscreen响应式变量，初始值根据document.fullscreenElement判断 - 在
onMounted中注册全局fullscreenchange事件监听器，更新isFullscreen.value - 在
onUnmounted中移除监听，避免内存泄漏 - 返回
isFullscreen和触发全屏/退出的工具函数（如requestFullscreen(el)、exitFullscreen()）
用 watch 响应全屏状态变化
拿到 isFullscreen 后，即可用 watch 精准响应其变更：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 监听时传入
isFullscreen（无需.value），回调中接收新旧值 - 进入全屏时可批量设置关键容器的样式（如移除边距、隐藏侧边栏、强制宽高 100vh/vw）
- 退出全屏时恢复原始布局，例如重置
body的 overflow、还原组件 key 触发重新渲染 - 若需访问 DOM 尺寸（如重设 ECharts 容器大小），建议搭配
nextTick或watchPostEffect，确保 DOM 已更新
配合布局调整的实用技巧
全屏下界面重排不只是开关样式，还需兼顾体验细节：
立即学习“前端免费学习笔记（深入）”；
- 为防止滚动条闪现，全屏时给
body加overflow: hidden，退出时恢复 - 图表类组件常依赖父容器尺寸，可在
watch回调中调用chart.resize()或修改组件:key强制刷新 - 若使用 CSS Grid/Flex 布局，全屏时可临时切换容器的
display或grid-template，退出时还原保存的原始样式（参考 useFullScreen Hook 的 state 保存机制） - 避免在
watch中直接操作大量 DOM，优先用响应式 class 绑定（如:class="{ 'fullscreen-layout': isFullscreen }"）
替代方案：用 watchEffect 更简洁
如果逻辑只依赖 isFullscreen，且不需要旧值，watchEffect 更轻量：
- 自动追踪
isFullscreen.value，写法更少（无需显式声明监听目标） - 初始化时会立即执行一次，适合首次进入就做布局适配
- 适合与计算属性联动，例如：
const layoutClass = computed(() => isFullscreen.value ? 'full' : 'normal')，再用watchEffect响应layoutClass变化
