💚
ChatGPT intermediate

Melhores práticas de otimização e performance em vue para Vue

Prompt gerado automaticamente para Otimização e performance em Vue em Vue

3 usos Vue

Prompt completo

"Atuando como um especialista em otimização de performance para aplicações Vue.js, sua tarefa é analisar um cenário comum de 'renderização excessiva' (excessive re-rendering) em um componente Vue.js. Crie um guia passo a passo detalhado para identificar, diagnosticar e aplicar as melhores práticas de otimização para mitigar esse problema.

**Cenário do Problema:**

Um componente `UserProfileCard.vue` exibe informações de um usuário (nome, email, foto, lista de amigos) e é renderizado dentro de um `v-for` para uma lista de 100 usuários. A cada vez que um usuário clica em um botão de 'curtir' (like) em *qualquer* `UserProfileCard` (o que atualiza um contador de likes no objeto do usuário correspondente), *todos* os 100 `UserProfileCard`s são re-renderizados, mesmo que apenas um tenha tido seus dados alterados. Isso causa um atraso perceptível na interface do usuário.

**Seu Guia Deve Conter:**

1.  **Identificação:** Como o desenvolvedor pode perceber que há um problema de renderização excessiva (ferramentas, padrões de comportamento).
2.  **Diagnóstico:**
    *   Quais ferramentas do Vue Devtools (ou outras) seriam usadas para confirmar o re-render desnecessário?
    *   Como interpretar os dados coletados para pinpointar a causa raiz?
3.  **Soluções e Melhores Práticas (com exemplos de código onde aplicável):**
    *   Uso de `v-once`.
    *   Estratégias com `v-if` / `v-show`.
    *   Otimização de `key` em `v-for`.
    *   Técnicas de memoização (ex: `computed` properties avançadas, bibliotecas como `vue-use/core` ou `lodash/memoize`).
    *   Componentes funcionais (stateless functional components) – quando e por que usar.
    *   `shouldComponentUpdate` / `PureComponent` (conceitos análogos em Vue, como `shallowRef` ou `markRaw` para otimizações de reatividade).
    *   Uso de `defineAsyncComponent` e

Tags relacionadas

Vue Otimização e performance em Vue gerado-automaticamente

Como usar este prompt

1

Clique no botão "Copiar" para copiar o prompt para sua área de transferência

2

Acesse sua ferramenta de IA preferida (ChatGPT, ChatGPT, Claude, etc.)

3

Cole o prompt e adapte conforme necessário para seu contexto específico