vue3动态监听内容高度

在Vue3中，可以使用`ref`来创建一个响应式的变量，然后使用`watch`来动态监听其内容高度的变化。

具体步骤如下：

1. 在模板中使用`ref`创建一个变量，并将其绑定到要监听高度的元素上：

<template>
  <div ref="content" :style="{height: height + 'px'}">
    // 内容
  </div>
</template>

2. 在`setup`函数中使用`watch`动态监听内容高度的变化，并将其赋值给`height`变量：

<script>
import { ref, watch } from 'vue'

export default {
  setup() {
    const content = ref(null)
    const height = ref(0)

    watch(content, () => {
      height.value = content.value.offsetHeight
    })

    return {
      content,
      height
    }
  }
}
</script>

这样，每当内容高度发生变化时，`watch`函数会自动调用，并将新的高度值赋给`height`变量，从而实现动态监听内容高度的效果。