Criação de perfis com a aba de desempenho do Vue DevTools
Registro de atualizações de componentes, identificação de novas renderizações desnecessárias e medição do tempo dos componentes.
Criação de perfis com a aba de desempenho do Vue DevTools é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
Por que analisar o desempenho
Antes de otimizar, você precisa saber onde o tempo é gasto. O Vue DevTools inclui uma visualização de desempenho/linha do tempo que registra as renderizações dos componentes, para que você encontre trabalho desperdiçado em vez de fazer suposições.
Instalando o Vue DevTools
Instale a extensão do navegador ou execute o aplicativo independente. Em projetos Vite, o plug-in vite-plugin-vue-devtools adiciona um inspetor integrado ao aplicativo.
npm install -D vite-plugin-vue-devtoolsIniciando uma gravação
Abra a aba de linha do tempo/desempenho do DevTools e pressione o botão de gravação; depois, interaja com o aplicativo. Pare a gravação para capturar a atividade de renderização durante esse período.
A linha do tempo de renderização dos componentes
Cada renderização de componente aparece como um evento na linha do tempo. Você pode ver quando um componente foi renderizado novamente e quanto tempo essa renderização levou.
O gráfico de aplicações
Uma aplicação é uma única descarga de atualizações no DOM. O gráfico de aplicações mostra cada aplicação e quais componentes foram renderizados nela, permitindo identificar aplicações que afetam muito mais componentes do que o esperado.
Gráfico de chama dos tempos dos componentes
O gráfico de chama empilha as durações de renderização dos pais e dos filhos. Barras largas indicam renderizações lentas; pilhas profundas mostram como a renderização se propaga pela árvore.
Identificando renderizações desperdiçadas
Uma renderização desperdiçada ocorre quando um componente é renderizado novamente, mas produz o mesmo resultado. Elas aparecem como eventos de renderização repetidos cujo resultado não alterou o DOM.
Mesma saída, nova renderização
Uma causa comum é passar um objeto recém-criado ou uma função de seta embutida como propriedade em cada renderização, interrompendo a memoização. O componente filho é renderizado novamente, embora sua saída visível seja idêntica.
<!-- new object every parent render forces child update -->
<Child :config="{ mode: 'a' }" />Corrigindo com referências estáveis
Eleve as constantes ou envolva os dados derivados em computed para que a mesma referência seja passada entre as renderizações.
const config = { mode: "a" };
// or: const config = computed(() => ({ mode: mode.value }));Correlacionando com interações
A linha do tempo também registra eventos do mouse e do teclado. Alinhe uma confirmação lenta com a interação que a disparou para encontrar o caminho exato do código a ser otimizado.
Contagem de renderizações no inspetor de componentes
O inspetor de componentes pode destacar os componentes à medida que eles são atualizados. Observar um contador piscar a cada alteração de estado não relacionada revela imediatamente o excesso de renderizações.
Verificação rápida
O que o gráfico de confirmações na aba de desempenho representa?
Recapitulação
Use a aba de desempenho/linha do tempo do Vue DevTools para registrar as renderizações. O gráfico de confirmações mostra cada atualização do DOM e seus componentes renderizados, enquanto o gráfico de chama revela as renderizações lentas. Procure renderizações desperdiçadas — componentes que são renderizados novamente sem alterar a saída, geralmente por causa de referências instáveis nas propriedades — e corrija-as com constantes elevadas ou computed.
Perguntas Frequentes
A aula “Criação de perfis com a aba de desempenho do Vue DevTools” é grátis?
Sim — o texto completo de “Criação de perfis com a aba de desempenho do Vue DevTools” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Criação de perfis com a aba de desempenho do Vue DevTools”?
Registro de atualizações de componentes, identificação de novas renderizações desnecessárias e medição do tempo dos componentes. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Criação de perfis com a aba de desempenho do Vue DevTools”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- v-memo para memorização de templates
- Criação de perfis com a aba de desempenho do Vue DevTools
- Rolagem virtual para listas grandes
- Web Workers com Vue