vue3 监听元素高度变化

在 Vue 3 中，可以使用 `ref` 函数创建一个对元素的引用，并使用 `watchEffect` 函数来监听元素高度的变化。具体步骤如下：

1. 在模板中使用 `ref` 函数创建一个对元素的引用：

<template>
  <div ref="myElement">This is my element</div>
</template>

2. 在组件中使用 `watchEffect` 函数来监听元素高度的变化：

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

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

    watchEffect(() => {
      if (myElement.value) {
        console.log(myElement.value.clientHeight);
      }
    });

    return {
      myElement,
    };
  },
};
</script>

在 `watchEffect` 函数中，我们使用了 `if (myElement.value)` 来确保元素已经被渲染并且已经存在了。如果元素存在，我们可以通过 `myElement.value.clientHeight` 来获取元素的高度。当元素高度发生变化时，`watchEffect` 函数会自动重新执行。