vue监听dom元素高度变化

要在 Vue 中监听 DOM 元素高度的变化，您可以使用 Vue 的 `$nextTick` 方法和 `Intersection Observer API`。

首先，在模板中，您需要使用一个具有固定高度的外层元素包裹您要监听高度变化的元素，例如：

<template>
  <div class="container">
    <div class="content" ref="myContent"></div>
  </div>
</template>

<style>
.container {
  height: 200px;
  overflow: auto;
}
.content {
  height: 400px;
}
</style>

上面的代码中，我们在外层使用了一个具有固定高度和滚动条的容器，并在内部添加了一个高度为 400px 的 `<div>` 元素。

接下来，在 Vue 实例中，您需要通过 `$refs` 来获取要监听高度变化的元素，并使用 `Intersection Observer API` 来监听该元素的变化，例如：

export default {
  mounted() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          this.$nextTick(() => {
            console.log(this.$refs.myContent.clientHeight)
          });
        }
      });
    });

    observer.observe(this.$refs.myContent);
  }
}

上面的代码中，我们在 Vue 实例的 `mounted` 生命周期钩子中创建了一个 `IntersectionObserver`，并通过 `$refs` 获取了要监听高度变化的元素。然后，我们使用 `IntersectionObserver` 监听该元素的变化，并在元素进入视口时，使用 `$nextTick` 方法获取元素的新高度，并打印到控制台中。

需要注意的是，`$nextTick` 方法会在 DOM 更新后执行回调函数，以确保获取到的元素高度是最新的。这是因为 Vue 的更新是异步的，在修改 DOM 后，您无法立即获取到最新的 DOM 元素高度。