MutationObserver和ResizeObserver

MutationObserver和ResizeObserver两种原生API接口用法几乎一致

//构造函数创建对应的对象
const mutation = new MutationObserver(callback)

const resize = new ResizeObserver(callback)


//调用observer()开始监听dom的变化
mutation.observe(targetDom, option)

resize.observe(targetDom, option)

但是MutationObserver对象开始监听时，option的属性childList、attributes和characterData至少有一个的值必须为true，option属性作用可以参照MutationObserver.observe() - Web API 接口参考 | MDN (mozilla.org)ResizeObserver.observe() - Web API 接口参考 | MDN (mozilla.org)

近期大屏项目需要根据屏幕尺寸调整dom尺寸，开始我使用的MutationObserver，过程中发现当dom元素尺寸为准确的像素值（如100px）时，当使用事件调整dom尺寸时，MutationObserver对象可以监听到，但当dom尺寸为百分比时无论尺寸怎么变化都无法监听到

当dom尺寸为百分比时 无论浏览器尺寸如何变化，css样式的属性值并没有变化

于是换ResizeObserver对象，无论是准确的像素值还是百分比尺寸，都可以监听到

//vue2+ts中使用如下报错
//resize = new ResizeObserver(this.resizeCallback)

//使用原生window调用才可以
resize = new (window as any).ResizeObserver(entries => {
    this.resizeCallback(entries)
})

//ResizeObserver对象回调函数返回的只有dom的尺寸相关，MutationObserver中有dom节点以及css所有属性
resizeCallback(params: any){
    if(!params.length) return
    //获取监听的dom对象变化后的宽高
    let { blockSize, inlineSize } = params[0].contentBoxSize[0]
}

可以在构造函数的回调函数中执行对应的dom处理，每次监听到dom对象尺寸的改变都会执行该回调函数

最后window可以监听到当前是否全屏或浏览器尺寸的变化

window.addEventListener('fullscreenchange', callback)

window.addEventListener('resize', callback)