vue怎么监听盒子高度的变化

在 Vue 中监听盒子高度的变化可以采用以下两种方法：

1. 使用 watch 监听 DOM 元素高度变化

可以通过在组件中使用 `watch` 监听 DOM 元素高度的变化，然后在回调函数中执行相应的操作。具体实现步骤如下：

- 在 `mounted` 钩子函数中获取需要监听高度变化的 DOM 元素，并将其保存在组件中。
- 使用 `watch` 监听 DOM 元素高度变化，并在回调函数中执行相应操作。

示例代码如下：

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

<script>
export default {
  mounted() {
    this.box = this.$refs.box;
  },
  watch: {
    box: {
      handler(newVal, oldVal) {
        // DOM 元素高度变化后的回调函数
        console.log('box height changed');
      },
      deep: true
    }
  }
}
</script>

2. 使用 ResizeObserver 监听盒子高度变化

`ResizeObserver` 是一个监听元素大小变化的 API，可以实时监测 DOM 元素的大小变化并进行相应的操作。具体实现步骤如下：

- 在 `mounted` 钩子函数中创建一个 `ResizeObserver` 实例，并指定需要监听大小变化的 DOM 元素。
- 在 `ResizeObserver` 的回调函数中执行相应的操作。

示例代码如下：

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

<script>
export default {
  mounted() {
    this.box = this.$refs.box;
    this.observer = new ResizeObserver(this.handleResize);
    this.observer.observe(this.box);
  },
  methods: {
    handleResize() {
      // DOM 元素高度变化后的回调函数
      console.log('box height changed');
    }
  },
  beforeDestroy() {
    this.observer.disconnect();
  }
}
</script>

以上两种方法都可以监听 DOM 元素高度变化，具体使用哪一种方法可以根据实际情况进行选择。