💚
ChatGPT intermediate

Guia para otimização e performance em vue em Vue

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

2 usos Vue

Prompt completo

"Você é um especialista em otimização de performance para aplicações Vue.js, com profundo conhecimento em padrões de design, ferramentas de profiling e as últimas novidades do ecossistema Vue.

Um desenvolvedor júnior está trabalhando em uma aplicação Vue 3 que exibe uma lista de milhares de itens (componentes `ListItem`) dentro de um componente pai (`ListView`). Atualmente, ao rolar a página, a interface se torna muito lenta e trava, especialmente em dispositivos móveis. O componente `ListItem` é relativamente simples, exibindo apenas um texto e um ícone, mas renderiza uma imagem pequena condicionalmente. O `ListView` busca os dados de uma API e os exibe.

Crie um guia detalhado e prático, passo a passo, para o desenvolvedor otimizar a performance de rolagem dessa lista. O guia deve abordar as seguintes áreas e justificar cada sugestão:

1.  **Virtualização de Lista:** Explique o conceito e recomende uma biblioteca Vue 3 popular e eficiente para virtualização de listas, fornecendo um exemplo de como implementá-la no `ListView`.
2.  **Otimização de Componentes:**
    *   Como o `v-for` pode ser otimizado para evitar re-renderizações desnecessárias dos `ListItem`? (Dica: `key`)
    *   Considerando a imagem condicional no `ListItem`, que técnicas podem ser usadas para otimizar seu carregamento e renderização, especialmente para evitar layout shifts e melhorar a percepção de performance? (Dica: `lazy loading`, `placeholder`, `aspect-ratio`).
    *   Há alguma otimização que pode ser feita no `ListItem` em relação à reatividade se seus dados não mudam com frequência? (Dica: `shallowRef`, `v-once`).
3.  **Profiling e Diagnóstico:**
    *   Que ferramentas do ecossistema Vue (ou do navegador) o desenvolvedor pode usar para identificar gargalos de performance específicos antes e depois das otimizações?
    *   Como interpretar os resultados mais comuns de profiling relacionados à renderização de listas?
4.  **Boas Práticas Gerais:** Mencione brevemente outras boas práticas que, embora não diretamente ligadas à virtualização, podem complementar a otimização de performance em cenários de listas extensas (ex: debouncing/

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