vue3监听dom元素高度变化

在Vue 3中，你可以使用Vue的响应式系统和DOM API来监听DOM元素的高度变化。以下是一种常见的实现方法：

1. 首先，在Vue组件中，使用`ref`函数创建一个对应DOM元素的引用。例如，给定一个`<div>`元素：

<template>
  <div ref="myElement"></div>
</template>

2. 在`mounted`生命周期钩子函数中，使用`ResizeObserver`来监听DOM元素的高度变化。在回调函数中，你可以执行需要的操作，比如更新组件的数据或执行其他逻辑。以下是一个简单的示例：

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

export default {
  mounted() {
    const myElement = ref(null);

    const resizeObserver = new ResizeObserver(entries => {
      for (const entry of entries) {
        // 处理高度变化的逻辑
        console.log(entry.contentRect.height);
      }
    });

    onMounted(() => {
      resizeObserver.observe(myElement.value);
    });

    return {
      myElement
    };
  }
}
</script>

在上面的示例中，我们创建了一个`ResizeObserver`实例，并在`mounted`钩子函数中使用`observe`方法来监听`myElement`引用的DOM元素的高度变化。当高度发生变化时，回调函数会被调用，并且通过`entry.contentRect.height`获取到新的高度值。

请注意，在Vue 3中，我们使用了Composition API中的`ref`和`onMounted`函数来创建和使用引用。这是Vue 3中推荐的响应式系统的用法。