vue监听宽高度变化

　　#从今天起记录我的2023#
　　当我们切换左侧菜单展示效果的时候，有时一些需要进行缩放计算的右侧内容并不能执行自适应效果，所以为解决类似此问题，我们可以使用以下几种方式进行监听宽高变化，在进行相应的逻辑计算。
　　1.使用element-resize-detector方式监听宽度变化
　　安装：npm install element-resize-detector --save
　　使用：//引入element-resize-detector import elementResize from ＂element-resize-detector＂; //在mounted中使用  mounted() {     //1、使用element-resize-detector方式监听宽度变化     var erd=elementResize();     let that=this;     //监听并执行     erd.listenTo(document.getElementById(＂mainSize＂),function(element){       var width=element.offsetWidth;       var height=element.offsetHeight;       that.$nextTick(function () {         console.log(999999999999);                })     })
　　}
　　2.Mutation Events中的DOMSubtreeModified
　　DOMSubtreeModified用于监听元素子项修改(包括删除和新增）；document.getElementById(＂mainSize＂).addEventListener(＂DOMSubtreeModified＂, this.setWidth);
　　Mutation Events中的问题：IE9不支持Mutation Events；性能问题：Mutation Events是同步执行的：它的每次调用，都需要从事件队列中取出事件并执行，然后事件队列中移除，期间需要移动队列元素；如果事件触发的较为频繁的话，每一次都需要执行上面的这些步骤，那么浏览器会被拖慢；Mutation Events本身是事件，所以捕获是采用的是事件冒泡的形式；如果冒泡捕获期间又触发了其他的Mutation Events的话，很有可能就会导致阻塞Javascript线程，甚至导致浏览器崩溃；
　　3.使用Mutation Observer
　　MutationObserver接口提供了监视对DOM树所做的更改的功能。Mutation Observer是在DOM4中定义的，用于替代Mutation Events的新API ; //必须更改style样式才会被监听到     var MutationObserver=window.MutationObserver||window.WebKitMutaionObserver||window.MozMutationObserver     var suppored=!!MutationObserver;     var article=document.getElementById(＂mainSize＂);     var mo =new MutationObserver( (list)=> {       console.log(＂00000＂);       for (const iterator of list) {         console.log(iterator);                }       console.log(＂00000＂);     })     var options={       attributes:true,       attributeFilter:[＂style＂],       attributeOldValue:true,     }     mo.observe(article,options);
　　浏览器兼容：
　　4.使用ResizeObserver
　　我们知道window.resize事件能帮我们监听窗口大小的变化。它会监听每个元素的大小变化（只有window对象才有resize事件），而不是具体到某个元素的变化。ResizeObserver接口监视Element内容盒或边框盒或者SVGElement边界尺寸的变化。（节点大小、出现或隐藏） const myObserver=new ResizeObserver(entries=>{       entries.forEach(entry => {         console.log(entry.contentRect);         console.log(entry.target);                });     })     myObserver.observe(document.getElementById(＂mainSize＂))
　　但是作为一个较新的JavaScript API，他的兼容性需要注意：
　　5.自定义指令监听某标签宽高变化
　　directives:{
　　//5、自定义指令监听某标签宽高变化
　　resize:{
　　bind(el,binding){
　　let width=＂＂,height=＂＂
　　function isResize(){
　　//获取当前元素的所有的计算样式
　　const style=document.defaultView.getComputedStyle(el);
　　if(width!==style.width||height!==style.height){
　　binding.value()
　　}
　　width=style.width
　　height=style.height
　　}
　　el._vueSetInterval=setInterval(isResize,300);
　　},
　　unbind(el){
　　clearInterval(el._vueSetInterval)
　　}
　　}
　　},
　　@大有學問​