usewindowsize hook 封装了防抖的窗口尺寸监听逻辑，含初始化、onmounted 绑定、onunmounted 清理，并返回 width/height ref 及 ismobile 等计算属性。

在组合式 API 中监听浏览器窗口大小调整，核心是封装一个可复用、生命周期安全、带防抖的响应式 Hook，而不是每个组件里重复写 window.addEventListener('resize', ...)。

封装 useWindowSize Hook

用 ref 存宽高初始值，onMounted 绑定事件，onUnmounted 清理监听，避免内存泄漏：

• 初始化：用 ref(window.innerWidth) 和 ref(window.innerHeight) 获取当前尺寸
• 监听逻辑放在 onMounted 中，调用 window.addEventListener('resize', handler)
• 卸载时必须调用 window.removeEventListener，否则组件销毁后仍会触发回调
• 更新函数只修改 ref 的 .value，不操作 DOM，保持纯粹响应式

必须加防抖，控制触发频率

窗口拖拽、横竖屏切换、软键盘弹出都会高频触发 resize，直接响应易卡顿。建议延迟 80–120ms 再执行更新：

Vuejs

Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v

下载

• 可用 @vueuse/core 的 useDebounceFn，或手写轻量防抖
• 防抖包裹的是尺寸读取和 ref 更新逻辑，不是整个事件监听器
• 首次加载也要立即执行一次（比如调用 updateSize()），确保初始值准确

返回断点计算属性，提升业务可读性

单纯 width/height 不够直观，多数场景需要判断设备类型或断点。可在 Hook 内部用 computed 封装常用标识：

• isMobile: computed(() => width.value
• isTablet: computed(() => width.value >= 768 && width.value
• breakpoint: computed(() => { if (width.value
• 这些计算属性也作为对象字段统一返回，组件解构即用

组件中直接解构使用

在 <script setup></script> 中导入并调用，无需额外初始化或手动绑定：

• const { width, height, isMobile, breakpoint } = useWindowSize()
• 模板中：<div :class="{ mobile: isMobile }"> <li>逻辑中：<code>if (isMobile.value) { ... } 或 watch(breakpoint, ...)
• 如需配合 ECharts 等库，也可在 watch 中调用 chartInstance.resize()