vue监听元素高度变化

要监听 Vue 组件中元素高度的变化，可以使用 Vue 的 `$nextTick` 方法和 `window.addEventListener` 方法。具体步骤如下：

1. 在 Vue 组件的 `mounted` 钩子函数中加入以下代码：

mounted() {
  this.$nextTick(() => {
    window.addEventListener('resize', this.handleResize)
  })
}

这里使用了 `$nextTick` 方法确保 DOM 元素渲染完成后再添加事件监听。

2. 在 Vue 组件中添加 `handleResize` 方法，用来处理窗口大小变化时的逻辑：

methods: {
  handleResize() {
    const height = this.$refs.myElement.offsetHeight
    console.log('Element height:', height)
  }
}

这里使用了 `$refs` 来获取需要监听高度变化的元素，并使用 `offsetHeight` 获取元素高度。

3. 最后，在 Vue 组件的 `beforeDestroy` 钩子函数中移除事件监听：

beforeDestroy() {
  window.removeEventListener('resize', this.handleResize)
}

这样就能监听元素高度的变化了。当窗口大小改变时，`handleResize` 方法会被调用，并输出元素的高度。