您可以使用ResizeObserver并将其集成到Vue-Component中

function observeHeight() {
  const resizeObserver = new ResizeObserver(function() {
     console.log("Size changed");
  });

 resizeObserver.observe(document.getElementById('yourId'));
}

function changeHeight() {
  var elem = document.getElementById('yourId');
  
  console.log('...loading data...')
  setTimeout(function(){ 
    elem.style = "height: 200px";
  }, 3000);
  
}

observeHeight();
changeHeight();

#yourId {
  background-color: beige;
  height: 100px;
}

<div id="yourId">
  
</div>

在搜索结果返回数据后，可以使用$ref.yourElement.clientHeight获取高度，然后将高度设置为data{}节的一部分，并从那里应用一个监视器。

new Vue({
  el: '#app',
  data: {
    height: 0
  },
  methods: {
    calculateHeight() {
      this.height = this.$refs.app.clientHeight;
    }
  }
});

如果要观察元件内的元素，请使用箭头功能：

observeHeight() {
      const resizeObserver = new ResizeObserver(() => {

        console.log('Size changed:', document.getElementById('elementId').clientHeight;);
      });

      resizeObserver.observe(document.getElementById('elementId'));
    }

<script setup>

const list = ref([
    'sdg sdfg sdfhs fhseraj sdhbfjasvfkjvaskjvfuas', 
    'ggs dfg s', 
    'sdg s sfg sfgs dfg'
])

const itemRefs = ref([])

onMounted(() => {
   alert(itemRefs.value[1].clientHeight)
})

</script>

<template>
  <ul style="width: 50px">
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>