vue项目中监听元素的宽高变化

当他们转换右侧工具栏展现效用的这时候，有这时候许多须要展开翻转排序的右侧文本并无法继续执行自适应效用，因此为化解类似于此难题，他们能采用下列三种形式展开窃听收录机变动，在展开适当的方法论排序。

1.采用element-resize-detector形式窃听长度变动加装：

加装：

npm install element-resize-detector –save

采用：

//导入element-resize-detectorimport 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，他的兼容性须要注意：