A memoização é uma técnica poderosa para otimizar aplicações e, no ecossistema Vue.js, ela é mais integrada e natural do que muitas pessoas imaginam. Embora React exija estratégias explícitas como useMemo e React.memo, o Vue já vem com mecanismos de cache reativo embutidos, além de ferramentas adicionais para controle fino de renderizações.
Vamos explorar como memoização funciona no Vue.js, suas formas de implementação, vantagens e riscos, e algumas diferenças práticas em relação ao React.
Reatividade no Vue: Memoização “automática”
A base do Vue é sua reatividade granular. Sempre que você define um computed, o Vue:
- Monitora automaticamente suas dependências;
- Recalcula o valor apenas quando alguma dependência muda;
- Retorna o valor armazenado em cache caso contrário.
<script setup>
import { ref, computed } from 'vue'
const firstName = ref('Luigi')
const lastName = ref('Moretti')
// Computed já vem memoizado por padrão
const fullName = computed(() => {
console.log('Recalculando fullName...')
return `${firstName.value} ${lastName.value}`
})
</script>
<template>
<p>{{ fullName }}</p>
<button @click="firstName = 'Luigi'">Forçar Re-render</button>
</template>Neste exemplo, o log só aparece quando firstName ou lastName mudam. Qualquer outro re-render não recalcula fullName.
Breve comparação com o React:
const fullName = useMemo(() => `${firstName} ${lastName}`, [firstName, lastName])Enquanto React exige useMemo explicitamente, Vue faz isso automaticamente com computed.
watchEffect e memoization reativa
Outro recurso importante é o watchEffect. Ele executa efeitos colaterais reativos, rastreando automaticamente suas dependências, sem precisar declará-las manualmente.
import { watchEffect } from 'vue'
watchEffect(() => {
console.log('fullName mudou:', fullName.value)
})Diferente de computed, watchEffect não armazena valor memoizado, mas é útil para reagir a mudanças com precisão (como logs, chamadas de API ou side effects).
Memoization manual para funções puras
Em alguns cenários, especialmente fora da árvore reativa do Vue, você pode usar memoization manual, como faria em JavaScript puro.
function memoize(fn) {
const cache = new Map()
return function(arg) {
if (cache.has(arg)) {
return cache.get(arg)
}
const result = fn(arg)
cache.set(arg, result)
return result
}
}
const expensiveCalculation = memoize((num) => {
console.log('Executando cálculo pesado...')
return num ** 2
})
const number = ref(4)
const result = computed(() => expensiveCalculation(number.value))✅ Ideal para cálculos pesados reutilizáveis que não dependem de reatividade direta.
🚫 Evite cachear dados altamente dinâmicos, pois isso pode aumentar consumo de memória desnecessariamente.
Controlando reatividade com shallowRef e shallowReactive
Por padrão, Vue faz reatividade profunda, ou seja, qualquer alteração interna em objetos ou arrays dispara atualizações.
Com shallowRef e shallowReactive, você controla manualmente quando o Vue deve re-renderizar, semelhante a como React.memo evita renders desnecessários.
import { shallowRef } from 'vue'
const data = shallowRef({ value: 0 })
// Alterações internas não disparam re-render
data.value.value = 10
// Trocar a referência dispara
data.value = { value: 20 }Isso é útil para otimizar componentes complexos, como tabelas ou gráficos.
v-memo: memoização declarativa no template (Vue 3.2+)
Introduzido no Vue 3.2, v-memo permite memoizar blocos de template com base em dependências específicas — assim como React.memo para componentes.
<template>
<div v-memo="[user.id]">
<!-- Este bloco só será re-renderizado quando user.id mudar -->
<UserProfile :user="user" />
</div>
</template>✅ Útil para listas grandes, componentes caros ou partes da UI que raramente mudam.
⚠️ Deve ser usado com critério: v-memo não substitui arquitetura bem projetada.
Comparando memoization: Vue vs React
| Recurso | Vue.js | React |
|---|---|---|
| Computed | Automático | Requer useMemo |
| Cache de dependências | Automático | Manual com array de dependências |
| Template memoization | v-memo (Vue 3.2+) | React.memo |
| Controle granular | shallowRef / shallowReactive | memo + memoization manual |
| Efeitos reativos | watchEffect | useEffect |
No Vue, a memoização é parte da arquitetura, enquanto no React ela é uma ferramenta extra para controle de performance.
Se você deseja entender melhor como funciona essa técnica no React, escrevi um post detalhando um pouco mais. Confira no link abaixo:
Cuidados e riscos da memoização no Vue
- Evite otimizar prematuramente: Vue já é eficiente em updates granulares.
- Memoization consome memória, especialmente caches manuais.
- v-memo mal usado pode mascarar problemas de arquitetura.
computedexcessivamente aninhados podem gerar complexidade e overhead.- Prefira clareza antes de micro-otimizações.
Compatibilidade
| Recurso | Vue 2 | Vue 3 | Observações |
|---|---|---|---|
computed | ✅ | ✅ | Core |
watchEffect | ❌ | ✅ | Composition API |
shallowRef / shallowReactive | ❌ | ✅ | Performance granular |
v-memo | ❌ | ✅ (3.3+) | Similar a React.memo |
| Memoization manual | ✅ | ✅ | JS nativo |
Conclusão
A memoização no Vue.js é mais natural e integrada que no React, graças ao seu modelo reativo granular.
Ferramentas como computed, watchEffect, shallowRef e v-memo tornam possível controlar com precisão quando e como partes da UI são recalculadas.
Antes de aplicar memoization manual, pergunte-se:
- Essa operação é realmente custosa?
- O Vue já não está otimizando isso por mim?
- Há ganho real de performance medido?
🔸 Dica final: Use o DevTools do Vue para inspecionar re-renderizações antes de aplicar memoização manual.
📢 Curtiu essa explicação?
Me siga no LinkedIn para mais conteúdos práticos sobre desenvolvimento frontend.
