在 Vue Composition API 中，监听屏幕尺寸变化最合理的方式是封装成可复用的组合式函数，如 useScreen 或 useWindowSize，确保生命周期安全、防抖控制、响应式返回和自动清理。
在 Vue Composition API 中，监听屏幕尺寸变化最合理的方式是封装成可复用的组合式函数（Composable），而不是在每个组件里重复写 window.addEventListener。核心要点是：生命周期安全、防抖控制、响应式返回、自动清理。
用 useScreen 封装响应式屏幕状态
这是最推荐的做法——把窗口尺寸和断点逻辑抽离为独立 Hook，比如 useScreen()：
- 内部使用
onMounted和onUnmounted确保事件绑定/解绑时机正确 - 用轻量防抖（如 100ms）避免 resize 频繁触发影响性能
- 返回
ref类型的width、height、isMobile等，可直接用于模板或逻辑判断 - 支持计算断点，例如
breakpoint.value === 'sm'，便于统一响应式策略
手动实现一个最小可用 useWindowSize
如果暂不引入第三方库，可快速手写一个基础版本：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 声明
const width = ref(window.innerWidth)和height = ref(window.innerHeight) - 在
onMounted中注册带防抖的 resize 回调（例如用setTimeout+ 标志位） - 在
onUnmounted中清除定时器并移除事件监听 - 不建议直接监听
window.onresize = ...，因会覆盖其他监听器
借助 VueUse 的 useWindowSize
@vueuse/core 提供开箱即用的 useWindowSize()，它已内置防抖、生命周期管理与 SSR 兼容处理：
立即学习“前端免费学习笔记（深入）”；
- 安装：
npm install @vueuse/core - 使用：
const { width, height } = useWindowSize() - 返回值全为
Ref，可直接在v-if、watch或 CSS 绑定中使用 - 底层仍基于
window.addEventListener('resize', ...)，但做了健壮封装
补充：监听单个元素尺寸用 useResizeObserver
如果目标不是整个窗口，而是某个 DOM 元素（如侧边栏、图表容器）的尺寸变化，应改用 useResizeObserver：
- 基于原生
ResizeObserverAPI，比监听 window 更精准、更高效 - 接收 ref 或 HTMLElement 作为 target，自动 observe/unobserve
- 适合做“容器自适应”而非“屏幕适配”，比如图表随父容器缩放重绘
