监听某个DIV的宽高变化_vue3监听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

使用ResizeObserver制作响应式Vue组件

2. MutationObserver

MDN MutationObserver
Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。

概念上，它很接近事件，可以理解为 DOM 发生变动就会触发 Mutation Observer 事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。

这样设计是为了应付 DOM 变动频繁的特点。举例来说，如果文档中连续插入1000个 p 元素，就会连续触发1000个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而 Mutation Observer 完全不同，只在1000个段落都插入结束后才会触发，而且只触发一次。

Mutation Observer 有以下特点。

1. 它等待所有脚本任务完成后，才会运行（即异步触发方式）。
2. 它把 DOM 变动记录封装成一个数组进行处理，而不是一条条个别处理 DOM 变动。
3. 它既可以观察 DOM 的所有类型变动，也可以指定只观察某一类变动。
   MutationObserver 详解 （来自《 JavaScript 教程》，by 阮一峰）