useWindowSize Hook 封装了响应式窗口尺寸获取功能，通过 ref 存储宽高，onMounted 添加带防抖的 resize 监听，onUnmounted 清理监听，同时返回 width、height 及基于宽度计算的 isMobile、breakpoint 等响应式断点标识，组件中解构即可直接使用。
直接封装一个 useWindowSize Hook，用 ref 存尺寸、onMounted 和 onUnmounted 管生命周期、加防抖保性能，返回的 width/height 就是响应式数据，组件里解构就能用。
基础结构：响应式变量 + 生命周期绑定
Hook 本质是一个函数，内部创建 ref 存当前宽高，挂载时监听 resize，卸载时移除监听。不手动操作 window.addEventListener 在 setup 里，而是收进 Hook 统一管理，避免重复代码和内存泄漏。
- 用
ref(window.innerWidth)和ref(window.innerHeight)初始化 -
onMounted中添加事件监听，触发更新函数 -
onUnmounted中清理监听器，防止组件销毁后还响应 - 更新函数只改 ref 的 value，不涉及 DOM 操作
加上防抖：避免 resize 频繁触发卡顿
浏览器 resize 会高频触发（尤其拖拽窗口时），直接更新可能造成渲染压力。加一个轻量级防抖（50–100ms）即可平衡及时性与性能。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 可用
lodash.debounce，或手写简易防抖函数 - 防抖函数包裹更新逻辑，不是包裹
addEventListener - 首次加载也要立即执行一次，确保初始值准确
暴露断点判断：让业务逻辑更直观
光有 width/height 不够，多数场景需要知道“是不是手机”“是否到平板阈值”。可在 Hook 内部基于 width 计算常用断点标识，全部用 computed 返回，保持响应式。
立即学习“前端免费学习笔记（深入）”；
- 例如
isMobile: computed(() => width.value < 768) breakpoint: computed(() => { if (width.value < 576) return 'xs'; if (width.value < 768) return 'sm'; ... })- 这些计算属性也作为对象字段一起返回，组件按需解构使用
组件中怎么用：解构即用，无需额外处理
在 <script setup> 中导入并调用，直接解构出 width、isMobile 等，模板里绑定，逻辑里判断，完全响应式。
- 例如：
const { width, isMobile, breakpoint } = useWindowSize() - 模板中：
<div :class="{ mobile: isMobile }"> - 逻辑中：
watch(() => isMobile.value, (newVal) => { ... }) - 不需要再写
window.innerWidth或matchMedia，也不用手动更新 ref
