Rolagem virtual para listas grandes
vue-virtual-scroller, RecycleScroller e renderização com altura fixa ou variável dos itens.
Rolagem virtual para listas grandes é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
O problema das listas grandes
Renderizar milhares de nós do DOM é lento e consome muita memória. A rolagem virtual renderiza apenas os itens atualmente visíveis na área de visualização, reutilizando os nós do DOM conforme o usuário rola a lista.
Instalando vue-virtual-scroller
Uma biblioteca popular é vue-virtual-scroller. Instale-a e importe seus estilos.
npm install vue-virtual-scrollerRegistrando o componente
Importe RecycleScroller e seu CSS e, em seguida, use-o no componente.
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";A propriedade items
RecycleScroller recebe toda a sua matriz de dados por meio da propriedade items. Ele nunca renderiza todos os itens de uma vez — apenas a janela visível.
<RecycleScroller :items="rows" />A propriedade item-size
item-size informa ao mecanismo de rolagem a altura, em pixels, de cada linha. Com um tamanho fixo, ele pode calcular instantaneamente o intervalo visível e a altura total da rolagem.
<RecycleScroller
:items="rows"
:item-size="48"
/>A propriedade key-field
Forneça uma identidade estável a cada item com key-field para que os nós reutilizados sejam associados corretamente aos dados.
<RecycleScroller
:items="rows"
:item-size="48"
key-field="id"
/>O modelo de item v-slot
Use o slot padrão com escopo para renderizar cada item visível. O slot expõe o item atual.
<RecycleScroller :items="rows" :item-size="48" key-field="id">
<template v-slot="{ item }">
<div class="row">{{ item.name }}</div>
</template>
</RecycleScroller>Apenas os itens visíveis são renderizados
À medida que o usuário rola a lista, o mecanismo de rolagem monta os itens que entram na área de visualização e desmonta os que saem dela. A quantidade de nós do DOM permanece pequena, independentemente do tamanho da lista.
Altura fixa ou variável dos itens
Alturas fixas são mais rápidas porque as posições são calculadas apenas com operações aritméticas. Quando as linhas têm alturas variadas, é necessário usar uma abordagem diferente.
Lidando com alturas variáveis
Para alturas variáveis, use DynamicScroller com DynamicScrollerItem, que mede os itens renderizados e ajusta as posições.
import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
<DynamicScroller :items="rows" :min-item-size="40" key-field="id">
<template v-slot="{ item, active }">
<DynamicScrollerItem :item="item" :active="active">
<div>{{ item.text }}</div>
</DynamicScrollerItem>
</template>
</DynamicScroller>Compromissos
A rolagem virtual complica recursos como a localização na página (Ctrl+F), links de âncora para itens fora da área visível e acessibilidade. Use-a somente quando as listas forem realmente grandes.
Verificação rápida
O que RecycleScroller realmente renderiza no DOM?
Recapitulação
A rolagem virtual com o RecycleScroller de vue-virtual-scroller renderiza apenas os itens visíveis. Passe os dados por meio de items, defina item-size e key-field e renderize cada linha no modelo v-slot. Use alturas fixas para obter mais velocidade ou DynamicScroller para alturas variáveis, reservando essa técnica para listas realmente grandes.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “Rolagem virtual para listas grandes” é grátis?
Sim — o texto completo de “Rolagem virtual para listas grandes” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Rolagem virtual para listas grandes”?
vue-virtual-scroller, RecycleScroller e renderização com altura fixa ou variável dos itens. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Rolagem virtual para listas grandes”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- v-memo para memorização de templates
- Criação de perfis com a aba de desempenho do Vue DevTools
- Rolagem virtual para listas grandes
- Web Workers com Vue