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
Outros prompts de Vue
ChatGPT
Melhores práticas de padrões de design em vue para Vue
Prompt gerado automaticamente para Padrões de design em Vue em Vue
5 usos
ChatGPT
Melhores práticas de otimização e performance em vue para Vue
Prompt gerado automaticamente para Otimização e performance em Vue em Vue
4 usos
ChatGPT
Melhores práticas de otimização e performance em vue para Vue
Prompt gerado automaticamente para Otimização e performance em Vue em Vue
2 usos