Vue 3 中怎么监听元素大小改变事件（ResizeObserver 结合事件绑定）-Vue.js-PHP中文网

Vue 3 中监听元素大小变化应使用 ResizeObserver API：①直接在 setup 中用 onMounted 创建并 observe，onBeforeUnmount 断开；②封装为 useResizeObserver 组合式函数支持响应式目标切换；③定义 v-resize 指令全局复用；注意 contentRect 不含 padding/border，IE 需降级轮询。

vue 3 中怎么监听元素大小改变事件（resizeobserver 结合事件绑定）

Vue 3 中监听元素大小变化，不能靠 window.resize，因为窗口没动、元素自己撑高或缩窄时它根本不会触发。真正该用的是浏览器原生的 ResizeObserver API，它专为监听单个或多个 DOM 元素的宽高变化而设计，响应及时、性能友好，且天然适配 Vue 的响应式逻辑。

直接在 setup 中使用 ResizeObserver 实例

适合简单场景，比如只监听一个容器、回调逻辑轻量：

在 onMounted 中创建 ResizeObserver，传入回调函数，里面能拿到每个 entry 的 contentRect（含 width 和 height）
用 ref 拿到目标元素（如 ），调用 observer.observe(targetRef.value)
务必在 onBeforeUnmount 中调用 observer.disconnect()，避免内存泄漏


封装成组合式函数 useResizeObserver
这是推荐做法，复用性高、逻辑清晰、支持响应式目标切换：

											
												
												
													Springboot Vue Builder
													从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
												
												下载
												
											
										

函数接收 target（可以是 Ref、HTMLElement 或数组）和 callback，内部自动处理多目标、目标变更、组件卸载清理
  利用 computed 动态解析 target 值，配合 watch 监听 targets 变化，变化时先 disconnect 再重新 observe

  返回 { start, stop } 方法，方便手动控制观察启停，比如弹窗关闭后暂停监听

定义自定义指令 v-resize
适合全局高频使用，写一次、处处绑定，语义也更直观：

用 WeakMap 存储 DOM 元素与 handler 的映射，避免强引用导致内存问题
  全局共享一个 ResizeObserver 实例（节省资源），在 mounted 钩子中调用 observe(el) 并存入映射
  模板中直接写 ，回调参数就是 entry.contentRect，简洁干净
注意事项和常见避坑点
实际用起来有几个关键细节容易出错：


contentRect.width/height 是 content box 尺寸，不含 padding 和 border；如需包含边框，可读 borderBoxSize（注意兼容性）
  Chrome 控制台可能报 ResizeObserver loop completed with undelivered notifications —— 这是警告不是错误，通常因频繁重绘或嵌套监听触发，不影响功能，开发期可忽略或隐藏 overlay
  IE 完全不支持，若需兼容旧浏览器，得降级为定时轮询 + getBoundingClientRect，但仅作兜底，不推荐作为主方案