v-memo Memoizar a Renderização da Subárvore
Última atualização: 2026-10-22
v-memo Memoizar a Renderização da Subárvore
O v-memo recebe um array de dependências; quando os valores não mudam, toda a subárvore é pulada — uma ferramenta de performance para listas muito longas (Vue 3.2+).
| Grupo | Diretivas |
|---|---|
| Tipo | Diretiva |
| Escopo | Template |
| Versão do Vue | 3.2+ |
| Suporte a SSR | Sim |
📝 Sintaxe
<div v-memo="[valueA, valueB]">...</div>
<li v-for="item in list" :key="item.id" v-memo="[item.selected]">⚙️ Argumentos
| expression | Um array de dependências; valores idênticos pulam a atualização (array vazio equivale a v-once) |
|---|
Retorno：Diretiva, sem valor de retorno
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
The number only updates when the dependency changes — a demo of skipping updates in long lists.💡 Pontos-chave
⚠️ Aviso Use apenas quando a análise de performance mostrar gargalo: uma dependência esquecida significa UI desatualizada.
ℹ️ Nota O uso principal é com v-for: v-memo="[item.selected]" faz as linhas não selecionadas pularem o diff.
💡 Dica v-memo="[]" se comporta como v-once (nunca re-renderiza).
🏷️ Diretivas relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Quando devo usar o v-memo?
R Quando listas longas com muito conteúdo estático travarem visivelmente — analise a performance primeiro, depois aplique.
P O que acontece se as dependências estiverem erradas?
R Uma dependência faltando deixa a UI desatualizada; dependências em excesso apenas perdem o benefício.
P Qual a relação com o v-once?
R v-memo="[]" equivale ao v-once; normalmente é um pulo condicional.
