Vue 3 中如何正确监听元素尺寸变化：ResizeObserver 与自定义指令的实战
原创
Vue 3 中如何正确监听元素尺寸变化：ResizeObserver 与自定义指令的实战
用户1839651
发布于 2026-09-28 08:01:52
发布于 2026-09-28 08:01:52
概述
做后台管理系统的图表模块时，经常遇到一个情况：容器宽度明明是 100%，图表初始化后却挤在角落，或者拖拽侧边栏后图表没有重新计算尺寸，留出大片空白。这类问题大多不是 ECharts 或 Chart.js 本身的问题，而是 JS 没有感知到元素尺寸变化。传统的 window.resize 只能监听视口变化，但元素尺寸变动还可能来自 Flex 布局调整、父级 display 切换、字体加载导致的回流，
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号