Vue3中如何实时监听div1高度变化并设置div2高度为其减12px

方案一：使用原生ResizeObserver API（推荐） #

这是浏览器原生提供的监听元素尺寸变化的API，能精准捕获div1的高度变化，包括内容更新、窗口resize等场景。

代码示例 #

<template>
  <div>
    <div ref="div1" class="div1">
      <!-- 动态内容区域 -->
      {{ dynamicText }}
    </div>
    <div ref="div2" class="div2" :style="{ height: `${div2Height}px` }"></div>
    <button @click="addText">添加文本扩展div1</button>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const div1 = ref(null)
const div2 = ref(null)
const div2Height = ref(0)
const dynamicText = ref('初始文本')

let resizeObserver = null

onMounted(() => {
  // 初始化div2高度
  if (div1.value) {
    div2Height.value = div1.value.offsetHeight - 12
  }

  // 创建ResizeObserver实例
  resizeObserver = new ResizeObserver(entries => {
    for (const entry of entries) {
      // 实时更新div2高度
      div2Height.value = entry.target.offsetHeight - 12
    }
  })

  // 监听div1的尺寸变化
  if (div1.value) {
    resizeObserver.observe(div1.value)
  }
})

onUnmounted(() => {
  // 销毁监听，避免内存泄漏
  if (resizeObserver && div1.value) {
    resizeObserver.unobserve(div1.value)
    resizeObserver.disconnect()
  }
})

const addText = () => {
  dynamicText.value += '\n新增一行文本，让div1高度增加'
}
</script>

<style scoped>
.div1 {
  border: 1px solid #ccc;
  padding: 8px;
  min-height: 50px;
}
.div2 {
  border: 1px solid #f00;
  margin-top: 8px;
}
</style>

关键说明 #

• ResizeObserver会在元素尺寸（高度、宽度）发生变化时自动触发回调，无需手动轮询
• 组件卸载时必须调用unobserve和disconnect清理监听，防止内存泄漏
• offsetHeight获取的是包含内边距、边框的实际渲染高度，若只需纯内容高度可改用clientHeight

方案二：结合CSS自定义属性实现样式驱动 #

如果希望逻辑与样式解耦，可以通过ResizeObserver更新CSS自定义属性，再用CSS的calc计算div2高度：

代码示例 #

<template>
  <div class="container" :style="`--div1-height: ${div1Height}px`">
    <div ref="div1" class="div1">{{ dynamicText }}</div>
    <div class="div2"></div>
    <button @click="addText">添加文本扩展div1</button>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const div1 = ref(null)
const div1Height = ref(0)
const dynamicText = ref('初始文本')

let resizeObserver = null

onMounted(() => {
  if (div1.value) {
    div1Height.value = div1.value.offsetHeight
  }

  resizeObserver = new ResizeObserver(entries => {
    div1Height.value = entries[0].target.offsetHeight
  })

  if (div1.value) {
    resizeObserver.observe(div1.value)
  }
})

onUnmounted(() => {
  if (resizeObserver && div1.value) {
    resizeObserver.unobserve(div1.value)
    resizeObserver.disconnect()
  }
})

const addText = () => {
  dynamicText.value += '\n新增一行文本，让div1高度增加'
}
</script>

<style scoped>
.container {
  --div1-height: 0px;
}
.div1 {
  border: 1px solid #ccc;
  padding: 8px;
  min-height: 50px;
}
.div2 {
  border: 1px solid #f00;
  margin-top: 8px;
  height: calc(var(--div1-height) - 12px);
}
</style>

问题原因说明 #

之前只能获取初始高度但无法实时捕获变化，是因为传统的resize事件仅针对窗口，不监听单个元素的尺寸变更。而ResizeObserver是专门解决单个元素尺寸监听问题的API，能覆盖内容更新、布局调整等所有导致元素高度变化的场景。

内容的提问来源于stack exchange，提问作者Lou14