ResizeObserver定义

ResizeObserver：是一个 JavaScript API，用于监视元素的大小变化。它可以观察一个或多个 DOM 元素，以便在元素的大小或形状发生变化时触发回调函数。

ResizeObserver ：为了更有效地处理元素尺寸变化而引入的，特别适用于响应式设计和自适应布局。

ResizeObserver兼容性

ResizeObserver提供方法

observe() 设置对对 Element或 SVGElement 观察的监听

disconnect() 取消和结束目标对象上所有对 Element或 SVGElement 观察

unobserve() 结束观察指定的Element或 SVGElement

ResizeObserver使用方法

<template>
  <div ref="resizeRef" class="test"></div>
</template>

const resizeRef = ref()
const resizeObserver = null

const openMonitor = ()=>{
	//获取监听元素 id class ref
	const target = resizeRef.value
	// 创建 ResizeObserver 实例
    const resizeObserver = new ResizeObserver(entries => {
      // entries 是一个 ResizeObserverEntry 对象数组，包含目标元素的信息
      entries.forEach(item =>{
		const { width, height } = item.contentRect;
		//获取 监听元素的宽高
		console.log('Width', width)
		console.log('Height', height)

        // 触发自定义的处理逻辑，
        this.handleResize(width, height);
	  })
    });

    // 开始监听目标元素的大小变化
    resizeObserver.observe(resizeTarget);
}

const handleResize = (width, height)=>{
	//执行相关内容
}

onMounted(() => {
  //dom加载完成时，触发监听事件
  openMonitor()
}

onBeforeUnmount(() => {
  // 关闭ResizeObserver监听器
  if(resizeObserver){
  	resizeObserver.disconnect()
  }
});