应监听 document.fullscreenelement 变化或 usefullscreen hook 返回的 isfullscreen ref，通过 watch 响应式更新图标；可封装为 ref 并在 fullscreenchange 事件中同步值，再用 :class 或 computed 切换样式。
直接监听全屏状态变化并切换图标，关键不是“监听某个变量”，而是监听浏览器全屏 API 的状态变更事件，再结合 Vue 响应式数据驱动样式更新。watch 本身不直接监听 DOM 全屏状态，但可以配合 useFullScreen Hook 或原生事件做响应式联动。
监听 document.fullscreenElement 变化
浏览器通过 document.fullscreenElement 判断是否处于全屏——该值为当前全屏元素（非 null）或 null。它不是响应式数据，不能直接传给 watch，但可封装为 ref 并手动同步：
- 用
ref(null)创建isFullscreen状态 - 在
fullscreenchange事件回调中更新它：isFullscreen.value = !!document.fullscreenElement - 再用
watch(isFullscreen, ...)做后续逻辑，比如切换图标 class 或 icon 名称
结合 useFullScreen Hook 统一管理（推荐）
若项目已使用成熟的全屏 Hook（如资料中提到的 useFullScreen），它通常内部已封装状态并返回 isFullscreen ref。此时可直接监听：
- 调用
const { isFullscreen, enter, exit } = useFullScreen(el) watch(isFullscreen, (now) => { icon.value = now ? 'icon-fullscreen-exit' : 'icon-fullscreen-enter' })- 模板中绑定：
:class="icon.value"或<icon :name="icon.value"></icon>
样式绑定写法：class 或内联 style 都可
图标样式切换不依赖复杂逻辑，推荐轻量方式：
- 用
:class绑定对象：:class="{ 'full-active': isFullscreen.value, 'full-inactive': !isFullscreen.value }" - 或用计算属性简化：
const iconClass = computed(() => isFullscreen.value ? 'i-exit' : 'i-enter')，再:class="iconClass" - 避免在 watch 回调里直接操作 DOM class，破坏响应式流
注意：不要监听 el.requestFullscreen() 调用本身
触发全屏是异步操作，el.requestFullscreen() 返回 Promise，但状态变更发生在之后。watch 的作用是响应结果，不是监听调用动作。所以重点始终是 document.fullscreenElement 或封装后的 isFullscreen ref。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
