v-memo para memorização de templates
Diretiva v-memo, matriz de dependências, situações em que a nova renderização é ignorada e comparação com computed.
v-memo para memorização de templates é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 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 que é v-memo
v-memo memoriza uma seção do modelo. O Vue armazena em cache o resultado renderizado e só renderiza novamente essa subárvore quando uma das dependências listadas muda. É um recurso de escape para marcações caras e quase estáticas.
A matriz de dependências
Você vincula uma matriz de dependências. Enquanto todos os valores da matriz forem iguais aos valores anteriores, o Vue ignorará a atualização do elemento inteiro e de seus filhos.
<div v-memo="[dep1, dep2]">
<!-- skipped unless dep1 or dep2 change -->
</div>Uma matriz vazia
Uma matriz vazia v-memo="[]" significa que o conteúdo será renderizado uma vez e nunca será atualizado — o equivalente a renderizar conteúdo estático uma única vez.
<div v-memo="[]">
<!-- rendered once, never re-rendered -->
</div>O principal caso de uso: v-for
O principal motivo para usar v-memo são listas enormes. Coloque-o dentro de v-for para que cada linha só seja renderizada novamente quando os próprios dados relevantes mudarem.
<div
v-for="item in list"
:key="item.id"
v-memo="[item.id === selectedId]"
>
...
</div>Memorizando a linha selecionada
No exemplo clássico, milhares de linhas só são renderizadas novamente quando o estado de seleção muda. Comparar item.id === selectedId faz com que uma linha seja atualizada apenas quando ganha ou perde a seleção.
<tr
v-for="item in items"
:key="item.id"
v-memo="[item.id === selectedId]"
>
<td :class="{ active: item.id === selectedId }">
{{ item.name }}
</td>
</tr>Liste todas as dependências reativas
Você deve incluir todos os valores reativos dos quais a subárvore depende. Se esquecer um, o elemento não será atualizado quando esse valor mudar — um erro sutil de interface desatualizada.
<!-- WRONG: name can change but is not listed -->
<div v-memo="[item.id]">{{ item.name }}</div>Nunca combine com v-if
Não coloque v-memo no mesmo elemento que v-if nem o combine de forma conflitante com as diretivas estruturais de v-for. Especificamente, v-memo e v-if no mesmo elemento não são compatíveis e produzem comportamento indefinido.
<!-- AVOID -->
<div v-memo="[a]" v-if="show">...</div>v-memo versus computed
Um computed armazena em cache um valor derivado de um estado reativo. v-memo armazena em cache nós virtuais renderizados. Eles resolvem problemas diferentes: computed evita recalcular dados, enquanto v-memo evita renderizar novamente a marcação.
Quando computed é suficiente
Se o seu gargalo for recalcular dados — filtragem, ordenação ou formatação — use computed primeiro: é mais simples e mais difícil de usar incorretamente.
import { computed } from "vue";
const sorted = computed(() =>
[...items.value].sort((a, b) => a.rank - b.rank)
);Quando v-memo ajuda
Use v-memo somente quando a análise de desempenho mostrar que renderizar novamente uma lista grande é o principal custo e que a maioria das linhas não muda entre as atualizações.
Meça primeiro
v-memo adiciona sobrecarga de memória e custo de comparação. Em listas pequenas, ele pode ser mais lento do que a renderização comum. Sempre analise o desempenho antes e depois para confirmar um ganho real.
Verificação rápida
Quando v-memo é a ferramenta adequada?
Recapitulação
v-memo="[deps]" ignora a renderização novamente de uma subárvore enquanto todas as dependências listadas permanecerem inalteradas — é ideal dentro de listas grandes de v-for. Liste todas as dependências reativas, nunca o combine com v-if no mesmo elemento, prefira computed para valores derivados e sempre analise o desempenho para confirmar um ganho real.
Perguntas Frequentes
A aula “v-memo para memorização de templates” é grátis?
Sim — o texto completo de “v-memo para memorização de templates” é 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 “v-memo para memorização de templates”?
Diretiva v-memo, matriz de dependências, situações em que a nova renderização é ignorada e comparação com computed. 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 1 de 4.
Quanto tempo leva a aula “v-memo para memorização de templates”?
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