onRenderTracked() Depuração: rastrear a coleta de dependências
Última atualização: 2026-10-22
onRenderTracked() Depuração: rastrear a coleta de dependências
onRenderTracked() é chamado a cada dependência reativa coletada durante a renderização do componente; com um depurador, dá para ver claramente quem provoca as re-renderizações.
| Grupo | Hooks de Ciclo de Vida |
|---|---|
| Tipo | API |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
onRenderTracked((event) => {
console.log(event.type, event.key, event.target)
})⚙️ Argumentos
| event | Evento de depuração: objeto target, propriedade key, tipo type |
|---|
Retorno：Nada
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Logs the dependency keys collected during render.💡 Pontos-chave
⚠️ Aviso Exclusivo para depuração em desenvolvimento: não tem efeito em builds de produção; não dependa dele para lógica de negócio.
💡 Dica Ao investigar por que este componente re-renderiza repetidamente, combiná-lo com breakpoints do navegador é o mais eficaz.
🏷️ Hooks de Ciclo de Vida relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Dá para ver em produção?
R Não, o hook só é chamado em builds de desenvolvimento.
P Qual a relação com o Vue Devtools?
R O painel de inspeção de componentes do Devtools usa internamente informações do mesmo tipo; os hooks manuais são adequados para logs personalizados mais refinados.
P Afeta significativamente o desempenho?
R É chamado a cada renderização; quando o volume de logs for grande, recomenda-se ativar temporariamente apenas nos componentes suspeitos.
