watcheffect 无法直接监听 document.fullscreenelement，需用 ref 封装全屏状态并手动同步：定义 isfullscreen = ref(!!document.fullscreenelement)，在 mounted 中监听 fullscreenchange 事件更新 ref，在 unmounted 中移除监听；watcheffect 读取 isfullscreen.value 实现响应式样式控制，注意防抖和性能优化。
watchEffect 本身不能直接监听全屏切换（如 document.fullscreenElement），因为该属性是只读的原生 DOM 属性，不是响应式数据，无法被 Vue 自动追踪依赖。要实现“监听全屏状态并触发样式调整”，必须将全屏状态封装为响应式变量，并在浏览器事件中手动同步更新。
把全屏状态转为 ref 响应式数据
全屏切换会触发 fullscreenchange 事件，此时可读取 document.fullscreenElement 判断是否处于全屏状态。用 ref 包裹这个布尔值，使其具备响应性：
-
定义 ref：如
const isFullscreen = ref(!!document.fullscreenElement) - 首次赋值：检查初始状态，避免组件挂载时遗漏当前状态
-
注意类型：
fullscreenElement为null表示未全屏，非null表示已全屏，直接用逻辑非即可转布尔
绑定 fullscreenchange 事件并更新 ref
在组件挂载时监听全局全屏变化事件，更新 ref 值；卸载时移除监听，防止内存泄漏：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
onMounted 中添加监听：
window.addEventListener('fullscreenchange', () => { isFullscreen.value = !!document.fullscreenElement }) -
onUnmounted 中清理：
window.removeEventListener('fullscreenchange', handler)（建议将回调提名为具名函数或使用闭包保存引用） -
兼容性提示：部分旧浏览器需监听
webkitfullscreenchange、mozfullscreenchange、msfullscreenchange，但现代项目通常只需标准事件
用 watchEffect 响应式驱动样式逻辑
watchEffect 内部读取 isFullscreen.value，即可自动触发重执行。适合用于动态 class 切换、内联样式控制或触发 layout 计算：
-
直接操作 DOM 类名：如
document.body.classList.toggle('fullscreen-mode', isFullscreen.value) -
配合 CSS 变量更新：如
document.documentElement.style.setProperty('--is-fullscreen', isFullscreen.value ? '1' : '0') - 触发计算属性或布局重排：例如根据全屏状态调整容器尺寸、隐藏侧边栏、禁用滚动等
补充：避免重复触发与性能注意
fullscreenchange 事件可能在某些浏览器中被多次触发（如进入/退出动画期间），可加简单防抖或状态比对提升健壮性：
- 在事件回调中判断新旧值是否一致，再决定是否更新
isFullscreen.value - watchEffect 默认立即执行一次，首次运行即应用初始全屏状态，无需额外初始化逻辑
- 不建议在 watchEffect 中执行高开销操作（如重绘大量 DOM 或发起请求），仅做轻量样式控制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
