循环list得到的dom，根据dom高度控制按钮是否显示（记录）

背景：最开始就是正常操作，获取dom高度，对比是否大于固定值，大于就是显示  展开  按钮，否则就不展示，由于dom列表是v-for 出来的，这里的按钮也是在循环列表中，我这里是根据对比高度，增加一个list ，然后给按钮v-show 绑定对应的值

const heightList = ref([]);
const getIsShowBtn = () => {
  for (let i = 0; i < versionList.value.length; i++) {
    const height = document.getElementsByClassName("allCard")[i].offsetHeight;
    if (height > 400) {
      heightList.value[i] = true;
    } else {
      heightList.value[i] = false;
    }
  }
};

<el-button
  v-show="heightList[index]"
  class="extendBtn"
  type="primary"
  @click="extendContent(index)"
  >展开</el-button>

问题：这个时候，我是在onMounted里面调用的getIsShowBtn() ,但是这个时候我要拿到的dom 还没有挂载完毕，所以这个时候是没生效的，然后使用了延时，但使用延时正常使用是没问题的，不知道是否是巧合，当清除缓存时，这里获取到的dom 就不准确了，少了部分图片的高度，猜测这里是图片链接还没加载完成。这里也使用过nextTick 也没有作用

解决：使用 ResizeObserver 来监听 dom 的变化，变化一次就调用一次 getIsShowBtn 这样拿到的就是最新的高度，继而就是准确的高度

const ro = new ResizeObserver((entries) => {
//监听的dom变化了就执行这里的，再次获取对比值
  entries.forEach((entry) => {
    getIsShowBtn();
  });
});
//获取版本数据列表
const versionList = ref([]);
const getVersionList = async () => {
  const res = await getVersionListApi();
  versionList.value = res;
//这里是先等数据拿到再进行监听dom 
  await updateMassage();
};
onMounted(async () => {
  getVersionList();
});
const updateMassage = () => {
  nextTick(() => {
//监听dom高度变化
    ro.observe(
      document.getElementsByClassName("allCard")[versionList.value.length - 1]
    );
  });
};
onUnmounted(() => {
  // 在组件销毁前取消观察
  if (ro) {
    ro.disconnect();
  }
});

最后实现最终效果