监听某个DIV的宽高变化

监听某个DIV的尺寸变化

背景：
vue项目中用到echarts图表，页面上有侧边栏，侧边栏收缩图表不能自适应，想通过监听内容部分的宽度让图表resize，但是用window带的resize，只能监听浏览器窗口大小变化，像侧边导航隐藏的这种情况不能人echarts重置。
为了监听某元素区域的变化而使echarts的尺寸重置，我第一时间想到的是resize事件，但是实际试了试，发现并不能起到我想要的效果，加在DIV上的resize事件根本不能触发，后来百度了一下，发现resize只能加在window对象上，并不能监听具体某个DOM元素！

解决方案

通过安装插件的方式

在项目中安装：element-resize-detector

参考博客链接

知识扩展

1. ResizeObserver

MDN ResizeObserver
ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变，内容区域则需要减去内边距padding。
ResizeObserver避免了在自身回调中调整大小，从而触发的无限回调和循环依赖。它仅通过在后续帧中处理DOM中更深层次的元素来实现这一点。如果（浏览器）遵循规范，只会在绘制前或布局后触发调用
ResizeObserver API