useWindowSize 是 Vue 3 中封装窗口大小监听的标准组合式函数，包含初始化响应式变量、定义更新函数、生命周期绑定与清理，并需处理 SSR 兼容性及可扩展防抖与手动刷新功能。

Vue 3 中用 组合式函数（Composable） 封装窗口大小监听，是最清晰、可复用、易维护的逻辑复用方式。核心是把“读初始尺寸 + 绑定 resize 监听 + 清理监听”抽成独立函数，统一管理响应式状态和副作用。

useWindowSize：标准封装结构

一个典型的 useWindowSize Hook 包含三个关键环节：

• 初始化响应式变量：直接取 window.innerWidth 和 window.innerHeight 作为 ref 初始值，避免首次渲染时为 0 或错位
• 定义更新函数：集中处理尺寸赋值逻辑，便于复用和测试
• 生命周期绑定与清理：在 onMounted 添加事件，在 onUnmounted 移除——防止组件卸载后仍触发回调造成内存泄漏

注意服务端渲染（SSR）兼容性

在 Nuxt 或 Vite SSR 场景下，window 对象不存在。需做运行环境判断：

vue-admin-change-reviewer

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

下载

• 使用 typeof window !== 'undefined' 包裹初始化和事件操作
• 初始值可设为 0 或预设断点（如 768），避免服务端报错
• 不建议在 setup 中直接访问 window，全部收口到 Hook 内部处理

在组件中使用很简单

解构出 width 和 height 后，可直接用于响应式判断或计算属性：

• 模板中：{{ width
• 样式控制：:class="{ mobile: width
• 配合 computed 做布局适配：const isTablet = computed(() => width.value >= 768 && width.value

扩展思路：支持手动触发与防抖

若页面有动态缩放、iframe 或第三方 UI 库干扰，可增强 Hook：

• 暴露 refresh() 方法，供外部主动同步当前尺寸
• 对 resize 事件加简单防抖（如 100ms），减少高频触发带来的性能波动
• 返回 isClient 标识，方便在 SSR 环境做条件渲染

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！