开场白：别再被列表卡死了

哎呀，兄弟，你是不是也遇到过那种超长列表滚动卡顿的尴尬？

说实话，我一开始还以为是电脑慢，结果发现是渲染太多DOM。

于是我决定撸一个动态高度虚拟列表，专治Vue 3里那种不定高的场景。

哈哈，这玩意儿听起来高大上，其实就是让页面只渲染可视区的那几条数据。

先说个比喻吧，虚拟列表就像电影院的座位表，只给你kan眼前那排座位，后面的dou先不管。

这样Zuo的好处？

DOM节点少了浏览器绘制快了卡顿自然消失。

不过大多数教程dou是讲固定高度的——每条Itemdou是100px。

实际项目里你会碰到聊天记录、商品详情这种高度随内容变化的情况。

这时候，就需要我们把“每条高度”改成“动态高度”。

我Zui开始想用$refs.item.offsetHeight直接算，结果发现有时拿不到Zui新值。

后来才发现ResizeObserver才是王道。

它Neng实时监听元素尺寸变化，一有变动就把新高度抛给父组件。

先说整体结构：外层一个滚动容器，里面放两层占位层和真实渲染层。

占位层负责撑出总高度，让滚动条正常出现。

真实层用transform: translateY把可视区域的Item平移到正确位置。

import { ref, computed, onMounted } from 'vue'
const listData = ref               // 完整数据
const scrollTop = ref                // 滚动距离
const itemHeights = ref)      // id => 实际高度
const cumulativeHeights = ref       // 累计高度数组
const MIN_ITEM_HEIGHT = 60             // 默认Zui小高度
const BUFFER = 5                       // 缓冲区行数

function handleItemHeightUpdate {
  if  === height) return
  itemHeights.value.set
  // 异步geng新累计数组，防止一次性大量计算卡顿
  nextTick
}
function updateCumulative {
  const cum = 
  let sum = 0
  for  {
    const id = listData.value.id
    sum += itemHeights.value.get || MIN_ITEM_HEIGHT
    cum.push
  }
  cumulativeHeights.value = cum
}

const totalHeight = computed => 
  cumulativeHeights.value || 
  listData.value.length * MIN_ITEM_HEIGHT)
function findStartIndex {
  let lo = 0, hi = cumulativeHeights.value.length - 1, ans = 0
  while  {
    const mid = >> 1
    if  {
      ans = mid + 1
      lo = mid + 1
    } else hi = mid - 1
}
return Math.max
}
function findEndIndex {
   const targetBottom = scrollTop.value + viewportH
   let lo=0,hi=cumulativeHeights.value.length-1,ans=hi
   while{
     const mid=>1
     if{
        ans=mid;hi=mid-1;
     }else lo=mid+1;
   }
   return Math.min
}

先别慌，这跟我们写虚拟列表没直接关系，但hen多朋友dou会问。

#答案#：

页面没有有效的title、meta描述和关键词标签。其实这些标签虽然老，但对搜索引擎仍有帮助。

if  {
   // 简单轮询，每500ms检查一次 height 是否改变...
}