A performance é uma feature. Em um mercado competitivo, a velocidade de carregamento e a fluidez da interface podem ser o diferencial entre reter ou perder um usuário. O Vue 3, com seu sistema de reatividade aprimorado e a Composition API, já nos dá uma base extremamente performática. No entanto, como desenvolvedores, podemos adotar certas práticas para extrair o máximo de desempenho.

Neste artigo, vamos explorar cinco dicas práticas que podem ter um impacto significativo na performance da sua aplicação Vue 3.

Dica 1: Use `v-once` para Conteúdo Estático

O Problema: Componentes que contêm uma grande quantidade de conteúdo que nunca muda (como um texto de "Termos de Serviço" ou um rodapé complexo) são re-renderizados desnecessariamente sempre que o estado do componente pai é atualizado.

A Solução: A diretiva v-once instrui o Vue a renderizar um elemento e seus filhos apenas uma vez. Após a renderização inicial, todas as atualizações futuras para este bloco de conteúdo serão ignoradas.

<template>
  <div v-once>
    <h1>Título Estático</h1>
    <p>Este parágrafo contém muito texto que não precisa ser reativo...</p>
  </div>
</template>

Quando usar: Ideal para qualquer parte da sua interface que você sabe que não mudará após ser carregada.

Dica 2: Carregamento Preguiçoso (Lazy Loading) com `defineAsyncComponent`

O Problema: Em aplicações grandes (Single Page Applications), o arquivo JavaScript inicial pode se tornar gigante, incluindo o código de todos os componentes, mesmo aqueles que o usuário talvez nunca veja (como modais, painéis de administração, etc.). Isso aumenta o tempo de carregamento inicial.

A Solução: defineAsyncComponent permite carregar um componente apenas quando ele for realmente necessário. Isso divide seu código em "chunks" menores, que são baixados sob demanda.

<script setup>
import { defineAsyncComponent } from 'vue';

const HeavyModal = defineAsyncComponent(() => 
  import('./components/HeavyModal.vue')
);
</script>

<template>
  <button @click="showModal = true">Abrir Modal</button>
  <HeavyModal v-if="showModal" />
</template>

Quando usar: Perfeito para componentes que não são visíveis no carregamento inicial da página, como modais, abas não ativas, ou componentes que só aparecem em rotas específicas (o Nuxt já faz isso automaticamente para as páginas!).

Dica 3: Virtual Scrolling para Listas Longas

O Problema: Renderizar uma lista com milhares de itens (um feed de notícias, uma tabela de dados, etc.) pode travar o navegador, pois ele precisa criar milhares de elementos no DOM.

A Solução: Virtual Scrolling é uma técnica que renderiza apenas os itens da lista que estão atualmente visíveis na tela do usuário. Conforme o usuário rola, os itens que saem de vista são removidos e os novos que entram são adicionados.

Implementar isso do zero é complexo, por isso a melhor abordagem é usar bibliotecas prontas e otimizadas. Uma excelente opção para Vue é a Vue Virtual Scroller.

Quando usar: Sempre que você precisar exibir listas que podem crescer para centenas ou milhares de itens.

Dica 4: Otimize Dependências Reativas

O Problema: Uma propriedade computada ou um watcher que depende de um objeto reativo inteiro será re-executado sempre que *qualquer* propriedade daquele objeto mudar, mesmo que a mudança não seja relevante para o cálculo.

A Solução: Seja explícito sobre as dependências. Em vez de depender do objeto inteiro, crie uma computada que dependa apenas da propriedade específica que você precisa.

<script setup>
import { ref, computed } from 'vue';

const user = ref({ id: 1, name: 'Isaac', settings: { theme: 'dark' } });

// RUIM: Depende do objeto 'user' inteiro.
// Será re-calculado se user.id mudar.
const theme = computed(() => user.value.settings.theme);

// BOM: Depende apenas da propriedade 'settings'.
// Só será re-calculado se user.value.settings mudar.
const themeOptimized = computed(() => user.value.settings.theme);
</script>

Quando usar: Em computadas e watchers que realizam operações custosas e dependem de objetos grandes e reativos.

Dica 5: Entenda a Memoização das Computadas

O Problema: Às vezes, temos uma função no template que realiza um cálculo pesado, e ela é chamada a cada re-renderização, mesmo que seus inputs não tenham mudado.

A Solução: Propriedades computadas (computed) são a forma nativa de memoização do Vue. Elas armazenam o resultado de seu cálculo em cache. A computada só será re-executada se uma de suas dependências reativas mudar. Se nada mudou, ela retorna instantaneamente o último resultado calculado.

<script setup>
import { ref, computed } from 'vue';

const projects = ref([...]); // Array com muitos projetos

// Esta computada só vai filtrar o array UMA VEZ.
// Ela só será re-executada se o array 'projects' mudar.
const featuredProjects = computed(() => {
  console.log('Calculando projetos em destaque...');
  return projects.value.filter(p => p.isFeatured);
});
</script>

<template>
  <!-- featuredProjects é usado aqui várias vezes, mas o cálculo só acontece uma vez -->
  <h2>{{ featuredProjects.length }} projetos em destaque</h2>
  <ul>
    <li v-for="p in featuredProjects">{{ p.name }}</li>
  </ul>
</template>

Quando usar: Sempre que você precisar exibir um dado que é derivado de outro dado reativo. Evite usar métodos para isso no template, prefira sempre as propriedades computadas.

Conclusão

Otimizar a performance é um processo contínuo de análise e refinamento. Ao aplicar estas cinco técnicas, você estará um passo à frente na criação de aplicações Vue 3 que não são apenas ricas em funcionalidades, mas também incrivelmente rápidas e agradáveis de usar.

5 Dicas de Performance em Vue 3 que Você Deveria Conhecer