vue3实时监听获取元素高度变化

在使用固定定位的时候需要在父级设置高度才能将div高度撑开占据空间, 由于内部的内容需要动态的控制显示内容, 因此需要实时监听div高度变化并赋值给容器

<div :style="{ height: containrHeight }" >
  <div id="contentId" ref="contentRef">
    <div>一些可能需要动态控制显示隐藏的内容</div>
  </div>
</div>

const containrHeight = ref('200px')
const contentRef = ref()
onMounted(() => {
  const resizeObserver = new ResizeObserver((entries) => {
    for (let entry of entries) {
      containrHeight.value = entry.target.clientHeight + 'px'
    }
  })
  resizeObserver.observe(document.querySelector('#contentId'))
})