Vue 长列表卡顿、滚动掉帧怎么办？一次性讲清楚

前言

在 Vue 项目里，只要一遇到长列表，很多同学第一反应都是：

“我这也没干啥啊，就是 v-for 渲染个列表，怎么就卡成 PPT 了？”

更狠一点的，产品一句话：

“这个页面数据有点多，可能十几万条吧。”

然后你就知道，这一页不优化是肯定过不去了。

这篇文章我们就从为什么卡开始，一步一步讲清楚Vue 长列表性能问题的本质，以及真正能落地的解决方案。

Vue 长列表为什么一定会卡？

先说结论一句话版：

卡，不是 Vue 慢，是 DOM 太多。

1. v-for 渲染大量节点的真实代价

假设你写了这样一段代码：

<div v-for="item in list" :key="item.id"> {{ item.name }} </div>

如果list有 10 万条数据，意味着什么？

• 浏览器里会真实创建10 万个 DOM 节点

• 每次滚动都会涉及：

  • 布局计算（Layout）
  • 回流（Reflow）
  • 重绘（Repaint）

• 任意一次父组件更新，都可能触发这些节点的 diff

这不是 Vue 的锅，这是浏览器物理极限的问题。

2. DOM 数量过多，回流重绘是致命的

浏览器渲染流水线大概是：

JS → Style → Layout → Paint → Composite

当 DOM 数量过多时：

• Layout 时间暴涨
• Scroll 时频繁触发 repaint
• FPS 掉到 30 以下，人眼就明显感觉卡

这也是为什么你会看到：

• 滚动时页面发虚
• 快速滑动直接“锁死”
• 真机比模拟器还卡

3. 图文混排 + 复杂组件 = 雪上加霜

如果列表项里还有：

• 图片
• 自定义组件
• 动态高度
• hover / 动画

那每一行的渲染成本都会进一步放大。

所以，结论很清楚：

长列表，绝对不能一次性渲染完。

核心解法：虚拟列表（Virtual List）

虚拟列表的核心思想其实很简单：

只渲染“屏幕可见的那一小部分 DOM”，其他的用占位撑高度。

1. 虚拟列表原理一句话版

假设屏幕一次最多只能看到 20 行：

• DOM 中永远只存在 20～30 行
• 滚动时，复用 DOM 节点
• 数据在变，DOM 不新增

这就是虚拟列表。

2. vue-virtual-scroller 快速上手 Demo

这是 Vue 里最成熟、最常用的方案之一。

安装

npminstallvue-virtual-scroller

基础示例（可直接跑）

<template> <RecycleScroller :items="list" :item-size="50" key-field="id" > <template #default="{ item }"> <div class="row"> {{ item.text }} </div> </template> </RecycleScroller> </template> <script setup> import { RecycleScroller } from 'vue-virtual-scroller' const list = Array.from({ length: 100000 }).map((_, i) => ({ id: i, text: `第 ${i} 行数据` })) </script>

关键点解析

• item-size：非常重要，最好是固定高度
• key-field：告诉组件用哪个字段复用 DOM
• 内部使用的是 DOM 复用，不是频繁创建/销毁

实测：10 万条数据，滚动依然 60 FPS。

key 用不好，虚拟列表也救不了你

很多列表性能问题，其实是key 用错了。

错误示例

<div v-for="(item, index) in list" :key="index">

问题：

• 数据插入 / 删除时
• index 全部变化
• Vue 会误以为所有节点都变了

正确示例

<div v-for="item in list" :key="item.id">

记住一句话：

key 一定要稳定、唯一、和业务语义一致。

keep-alive 和组件卸载策略

在分页列表或 Tab 场景中，经常会遇到：

“切换回来列表还在，但怎么感觉越来越卡？”

keep-alive 的正确用法

<keep-alive :max="2"> <router-view /> </keep-alive>

• 控制缓存页面数量
• 避免无限缓存导致内存膨胀

离开页面主动清理数据

onDeactivated(()=>{list.value=[]})

对于超大列表，离开页面就应该释放内存，不要心疼。

IntersectionObserver 做懒加载

对于图片、复杂组件，可以再加一层优化。

图片懒加载示例

constobserver=newIntersectionObserver(entries=>{entries.forEach(entry=>{if(entry.isIntersecting){entry.target.src=entry.target.dataset.src observer.unobserve(entry.target)}})})

• 图片进入可视区才加载
• 极大降低首屏压力

实战结果：10 万级表格渲染

优化前：

• 首屏白屏 3～5 秒
• 滚动 FPS < 30

优化后（虚拟列表 + 懒加载）：

• 首屏 < 500ms
• 滚动稳定 60 FPS

总结

Vue 长列表优化，本质是“控制 DOM 数量”。
只要 DOM 在可控范围内，性能问题基本都能解决。