vue3,监听元素尺寸变化

在Vue3中，为了监听元素尺寸的变化，你可以利用Vue提供的生命周期钩子函数`updated()`或`mounted()`配合MutationObserver API。MutationObserver允许你观察DOM树结构的变化。

以下是一个简单的示例，展示如何在组件挂载后监听元素尺寸变化：

<template>
  <div ref="container" :style="{ width: containerWidth, height: containerHeight }">组件内容</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const containerRef = ref(null); // 定义一个ref来引用容器元素
let containerWidth = ref(0); // 存储宽度
let containerHeight = ref(0); // 存储高度

function observeSizeChange() {
  const observer = new MutationObserver(mutationsList => {
    mutationsList.forEach(mutationRecord => {
      if (mutationRecord.type === 'attributes') {
        if (mutationRecord.attributeName === 'style') {
          // 更新尺寸值
          containerWidth.value = parseInt(containerRef.value.style.width);
          containerHeight.value = parseInt(containerRef.value.style.height);
        }
      }
    });
  });

  // 观察指定元素的尺寸属性变化
  observer.observe(containerRef.value, {
    attributes: true,
    attributeFilter: ['style']
  });

  // 清理函数，防止内存泄漏
  return () => observer.disconnect();
}

// 在组件挂载后开始观察尺寸变化
onMounted(() => {
  observeSizeChange();
});
</script>

当你需要停止监听时，记得在组件卸载前调用返回的清理函数`observer.disconnect()`。