优先用 scroll-view + offsetTop 实现虚拟滚动，App 端必须切 nvue 并使用 list 组件；行高须固定、key 用稳定字段（如 item.id）、禁用 enable-back-to-top；所有方案均受限于平台，无原生虚拟列表支持。
直接上结论：别用 v-for 渲染全量数据，优先用 scroll-view + offsetTop 手动实现虚拟滚动；App 端必须切到 nvue 并改用 list 组件；所有方案都要求行高固定、key 用稳定字段、禁用 enable-back-to-top。
scroll-view + offsetTop 是跨端唯一能跑通的虚拟滚动方案
uni-app 没有原生虚拟列表，vue-virtual-scroller 这类库依赖 document 和 CSS transform，在小程序和 App 端会报 document is not defined 或样式错乱，根本起不来。官方组件库、uView、z-paging 的“虚拟列表”底层也全是基于 scroll-view 手动算索引实现的——这不是妥协，是平台限制下的必然选择。
实操要点：
-
scroll-view必须设固定高度（如height: 600rpx），且scroll-y为true，否则@scroll不触发 - 必须禁用
enable-back-to-top：它会劫持滚动事件，导致@scroll回调失灵 - 单行高度必须固定（比如
80rpx）；动态高度需用z-paging的cell-height-mode="dynamic"，但会牺牲部分性能 - 监听
@scroll，用Math.floor(event.detail.scrollTop / 80)得到可视起始索引，再取前后各 5 条作缓冲区
key 写成 index 就等于放弃稳定性
:key="index" 是长列表状态错乱的头号原因。Vue 在 diff 时会复用组件实例，一旦增删数据，input 输入框内容漂移、switch 开关状态错位、图片加载错图就全来了——这不是 bug，是 key 不稳定引发的必然结果。
正确做法：
-
key必须是数据源里稳定唯一的字段，比如:key="item.id"或:key="item.sn" - 后端接口必须返回带唯一标识的字段，前端严禁用
Array.indexOf()或Math.random()生成伪key - 如果后端没给
id，至少用:key="item.timestamp + '-' + item.content.slice(0,10)"做弱唯一拼接，比index强
App 端 nvue 必须用 list 组件，scroll-view 是硬伤
App 端 nvue 里 scroll-view 仍是 WebView 封装的滚动容器，根本触不到原生列表的视图复用机制。iOS 会触发 WKWebView 强制重排，Android 常报 OutOfMemoryError 或直接白屏闪退——哪怕你加了 -webkit-overflow-scrolling: touch 也没用，那套 CSS 只对 Webview 生效，nvue 不走这条路。
实操要点：
-
list组件底层调用的是 iOSUITableView和 AndroidRecyclerView，天然支持懒加载、局部更新、内存回收 - 必须设固定行高，比如
height="120"，否则无法计算可视区域，list会渲染失败或空白 - 禁止嵌套
scroll-view、swiper等滚动组件，手势会冲突，导致滑动失效 - 图片必须用
image标签（不是img），且开启lazy-load和mode="aspectFill" - 数据更新不能直接赋值
this.listData = []，必须用append()、insert()等list原生方法
setData 和响应式开销比 DOM 更容易被忽略
真机卡顿、模拟器不卡，大概率不是渲染问题，而是 setData 超限或 Vue 响应式追踪崩了。小程序单次 setData 数据量上限通常 2MB，而 Vue 对每个 item 都要建立响应式代理——500 条含 10 个字段的对象，光代理开销就能拖垮内存。
规避手段：
- 别把整个列表塞进一个
data字段（如this.listData = allItems），改用this.visibleData = visibleItems+this.totalHeight = 80 * allItems.length拆开管理 - 滚动回调里别直接赋值
this.visibleData =，包一层this.$nextTick(() => { this.visibleData = })防setData冲突 - 列表项里避免
watch、深层computed、或嵌套 3 层以上的响应式对象 - 所有
image必须加lazy-load属性，显式设置width和height，或用mode="aspectFill"+overflow: hidden控制裁剪
最易被忽略的点是：行高必须固定、key 必须稳定、scroll-view 在 App 端必须换 list ——这三件事不做，其他优化都是隔靴搔痒。
