ResizeObserver和IntersectionObserver

ResizeObserver

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

const resizeObserver = new ResizeObserver((entries) => {
    // dosomething
    console.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'))
})

用于图片懒加载