watchEffect 适合响应式同步全屏状态，因其自动追踪 document.fullscreenElement 变化并更新 isFullscreen；需配合 try/catch 处理 API 错误，避免副作用，确保按钮操作与系统退出均能双向同步。
watchEffect 在 Vue 3 中非常适合响应式地同步全屏状态，因为它能自动追踪依赖、无需手动指定监听源，特别适合处理 document.fullscreenElement 这类外部 DOM 状态变化。
监听浏览器原生全屏状态变化
浏览器全屏状态（如按 F11 或调用 element.requestFullscreen()）会改变 document.fullscreenElement，但这个变化不会自动触发 Vue 响应式更新。watchEffect 可以主动读取该属性，从而建立响应式连接：
- 在
setup()中直接读取document.fullscreenElement，watchEffect 会将其作为依赖自动追踪 - 只要该值变化（null ↔ 元素），回调就会执行，此时可同步更新组件内的
isFullscreen状态 - 注意：不要在 watchEffect 内部修改被追踪的原生属性（如赋值给 document.fullscreenElement），只做响应式同步
实现双向状态同步（点击按钮 + 系统退出都响应）
用户可能通过组件按钮进入/退出全屏，也可能用 Esc 键或浏览器菜单退出——两种路径都要同步 UI 状态：
- 定义一个响应式 ref：
const isFullscreen = ref(false) - 用 watchEffect 读取
document.fullscreenElement并更新isFullscreen.value - 在切换函数中，先调用
requestFullscreen()或exitFullscreen()，再让 watchEffect 自动捕获结果并更新状态，无需手动设值 - 这样无论哪种方式触发全屏变更，UI 都能保持一致
避免重复触发和清理副作用
watchEffect 默认在组件卸载时自动停止，但在全屏逻辑中还需注意：
立即学习“前端免费学习笔记（深入）”；
- 全屏 API 可能抛错（如跨域 iframe 不支持），建议用
try/catch包裹requestFullscreen调用 - 如果组件内有多个全屏相关逻辑，watchEffect 回调里不要做耗时或副作用操作（如发请求、改 DOM），保持轻量
- 如需在退出全屏后滚动回顶部等操作，可在 watchEffect 内判断
!document.fullscreenElement后执行，但建议抽离为独立逻辑，避免耦合
完整示例代码结构
关键点在于「读即追踪」：只要在 watchEffect 回调里访问 document.fullscreenElement，它就被纳入响应链：
import { ref, watchEffect } from 'vue'
export default {
setup() {
const isFullscreen = ref(false)
watchEffect(() => {
isFullscreen.value = !!document.fullscreenElement
})
const toggleFullscreen = async () => {
if (!document.fullscreenElement) {
try {
await document.documentElement.requestFullscreen()
} catch (err) {
console.warn('进入全屏失败:', err)
}
} else {
await document.exitFullscreen()
}
}
return { isFullscreen, toggleFullscreen }
}
}
模板中用 v-if="isFullscreen" 或图标切换即可实时响应。
