vue监听宽高度变化 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)

}

}

},

@大有學問?