vue 3 中需通过 onmounted 添加 window.resize 事件监听并用 onunmounted 清理，配合节流、computed 判断设备类型及 watch 处理副作用；布局变化应优先用 resizeobserver 而非 resize 事件，并可封装为 usewindowsize 组合式函数复用。
Vue 3 中没有内置的 @resize 指令，也不能直接在模板里写 @resize="handler" 来监听浏览器窗口变化——这个事件不属于 DOM 元素，而是 window 对象的原生事件。所以“实时调整布局”的关键不是加个修饰符，而是正确绑定、响应并清理 resize 事件。
用 onMounted + addEventListener 监听窗口变化
这是最常用、兼容性好、逻辑清晰的方式：
- 在
onMounted中调用window.addEventListener('resize', handler) - 把宽度/高度存进
ref，让视图自动响应更新 - 务必在
onUnmounted中调用removeEventListener，避免内存泄漏 - 可配合
throttle（节流）优化高频触发，比如每 100ms 最多执行一次
用 Computed + Watch 实现响应式布局逻辑
不建议只靠 watch 监听原始数值变化来驱动复杂布局，但可以结合计算属性做语义化判断：
- 定义
const isDesktop = computed(() => windowWidth.value >= 1024) - 在模板中用
v-if="isDesktop"控制侧边栏显隐 - 用
watch监听isDesktop，触发图表重绘、表格列收缩等副作用 - 比直接 watch 数值更易读、更利于维护
注意 resize 事件的局限性
它只响应浏览器窗口尺寸或缩放比例变化，和页面内元素无关：
- 折叠菜单、加载新内容、富文本插入图片……这些都不会触发
resize - 如果布局变化由内部状态引起（比如展开一个面板），应直接响应对应 ref 或 store 的变化
- 真正需要监听某块区域尺寸时，优先用
ResizeObserver，它专为元素级尺寸变更设计 - 例如：echarts 容器宽高变了，用 ResizeObserver 比监听 window.resize 更精准、更及时
简单封装成可复用的组合式函数
把监听逻辑抽成 useWindowSize()，多个组件就能共享：
- 返回
{ width, height }两个 ref - 内部自动处理挂载/卸载、节流、初始化赋值
- 使用时只需
const { width } = useWindowSize()，模板里直接用{{ width }}或v-if="width > 768" - 后续想升级为 ResizeObserver 方案，也只需改内部实现，调用方完全无感
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
