ResizeObserver和IntersectionObserver

ResizeObserver

ResizeObserver是监听DOM元素宽高的变化，需要注意的一点就是监听出变化结果是contentBox的宽度和高度

const resizeObserver = new ResizeObserver((entries) => {// dosomethingconsole.log('Size changed')
})
onMounted(() => {// 开始监听 当dom contentBox 尺寸发生变化时 触发上面的回调resizeObserver.observe(document.querySelector('.demo'))
})

用于监听元素大小的变化 

IntersectionObserver

IntersectionObserver 是监听DOM元素是否可见

const intersectionObserver = new IntersectionObserver((entries) => {// 如果 intersectionRatio 为 0，则目标在视野外，if (entries[0].intersectionRatio <= 0) return// dosomething})
onMounted(() => {// 开始监听 当dom的可见状态发生变化时，触发 上面的回调intersectionObserver.observe(...document.querySelector('.demo'))
})

用于图片懒加载