vue3+ts 动态获取组件高度, 动态获取DOM结构高度

项目场景：

计算需要获取某个组件的高度, 但是组件有展开和收起两种状态, 高度不一样, 需要监视组件状态变化, 在变化高度后重新调取计算方法

---

解决方案：

• 使用ResizeObserver API，帮助我们监听DOM节点的变化，这种变化包括但不仅限于：某个节点的出现和隐藏、某个节点的大小变化

1、observer =new ResizeObserver()实例, 然后绑定变化后调用的方法
2、调用ResizeObserver的方法observe(), 绑定监听的DOM结构
3、页面销毁时, 调用ResizeObserver的方法disconnect(),取消监听,防止内存泄漏

<script setup>
  import {ref,onMounted,onUnmounted} from  "vue"
   let observer: ResizeObserver | null = null;
  const searchBoxRef = ref(null)
  const handleResize = ()=>{console.log("被调用")}
  onMounted(() => {
    observer = new ResizeObserver(handleResize); //handleResize 节点变化后调用的方法
    observer.observe(searchBoxRef.value); //searchBoxRef.value 为DOM结构
  });
  onUnmounted(() => {
    // 取消监听
    observer&&observer.disconnect()
  });
</script>