问题描述
监听DOM元素大小的变化，在前端开发中，算是一个比较常见的需求，比如我们要制作可伸缩的图表的时候，可能需要根据DOM大小的变化，进行动态的更新图表。
解决方案
方法一：
监听window变化，再改变对应DOM变化
window.onresize = function() {const width = getStyle(dom, 'width');const height = getStyle(dom, 'height');
}
function getStyle(ele,attr){if(window.getComputedStyle){return window.getComputedStyle(ele,null)[attr];}return ele.currentStyle[attr];
}
通过这样的方式可以进行监听DOM元素的变化，但是不是最完善的。
例：通过js改变一个dom的宽度或者高度，但是window是没有触发resize事件的。
方法二：
定时轮询
let timer = 0；
timer = setInterval(() => {const style = {width: getStyle(dom, 'width'),height: getStyle(dom, 'height'),};
}, 200)
每过200ms，我们都进行一次dom大小的获取，从而和之前的宽高进行对比，就能知道DOM是否发生了变化。
缺点：开销太大。
方法三：
监听元素的滚动事件，在 目标 dom 里面包裹一个同等大小的 div，是隐藏不可见的，当目标 dom 大小变化时，触发滚动事件。
参考文章：巧妙监测元素尺寸变化
方法四：
MutationObserver
通过 MutationObserver 监听dom 节点变化，MutationObserver 是在DOM4规范中定义的，它的前身是 MutationEvent 事件，该事件最初在 DOM2 事件规范中介绍，到来了 DOM3 事件规范中正式定义，但是由于该事件存在兼容性以及性能上的问题被弃用；可以用它来监听 dom style 的变化
参考文章：
Mutation Observer API
JS监听div的resize事件
方法五：
IE9-10 默认支持 div 的 resize 事件，可以直接通过 div.attachEvent('onresize', handler); 的方式实现;
其它浏览器,通过在 div 中添加一个内置 object 元素实现监听,设置 object 元素的 style 使其填充满 div，这样当 div 的 size 发生变化时，object 的 size 也会发生变化,然后监听 object 元素的 contentDocument.defaultView(window对象)的 resize 事件。
参考文章：JS监听div的resize事件
项目使用分析
第一，我们是通过setInterval的方式进行监听DOM变化，那项目中可能有多个DOM需要我们监听，难道要启动多个setInterval？显然这是一种很low的行为。
原理上，我们其实可以使用一个数组，来维护需要监听的DOM，每当我们监听一个DOM，那我们只需要向这个数组中新增一个DOM元素就可以了。这样我们只需要一个setInterval进行这个数组的遍历，对比每一个DOM是否进行了变动。
第二，我们希望我们有一个简单的API，我们不想关注内部细节，我监听一个DOM，就进行bind函数的绑定，我解除一个DOM的监听，我可以使用类似clear之类的函数解除监听。
第三，监听DOM必须是为了实现某个东西，所以我们可能会有一个回掉函数。
第四，我们必须有一个比较好的数据结构，来组织我们的代码。监听的DOM不止一个，可能我们需要的是一个list。其中我们在合适的时机，读取这个DOM的原本的宽高，和现在的宽高进行对比。
方法六：
Vue指令
参考文章：监听尺寸元素变化
方法七：
npm项目
例如：
element-resize-detector
wd-domsize-monitor
参考文章
vue中监控元素大小变化element-resize-detector
vue+element项目里实时监听某个div宽度的变化，然后执行相应的事件
如何监听DOM大小的变化
js怎么监听div元素的resize