O problema da prop drilling
Por que a prop drilling prejudica a manutenibilidade, o que provide/inject resolve e quando usar esse recurso.
O problema da prop drilling é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 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.
O que é o encadeamento de props
Encadeamento de props é a passagem de dados por várias camadas de componentes apenas para alcançar um componente profundamente aninhado. Cada componente intermediário precisa aceitar e encaminhar a propriedade, mesmo que nunca a utilize.
Uma árvore profunda de componentes
Imagine uma árvore: App -> Layout -> Page -> Section -> Widget. O Widget, na parte inferior, precisa do theme atual, mas somente o App, no topo, o conhece.
App
Layout
Page
Section
Widget <-- needs "theme"Passando pelo App
App mantém o theme e o passa para Layout como uma prop.
<!-- App.vue -->
<Layout :theme="theme" />Layout o encaminha
Layout não usa o theme, mas precisa declará-lo e encaminhá-lo apenas para que ele chegue ao próximo nível.
<!-- Layout.vue -->
const props = defineProps({ theme: String });
// template:
<Page :theme="props.theme" />Page também o encaminha
Page repete o mesmo código repetitivo: declarar e depois encaminhar, embora não tenha interesse no theme.
<!-- Page.vue -->
const props = defineProps({ theme: String });
<Section :theme="props.theme" />Section o encaminha novamente
O mesmo acontece em Section. Cada camada acrescenta uma ligação repetitiva que não tem relação com a responsabilidade daquela camada.
<!-- Section.vue -->
const props = defineProps({ theme: String });
<Widget :theme="props.theme" />Por fim, Widget o utiliza
Somente na parte inferior Widget realmente utiliza o theme. As quatro camadas acima apenas o repassavam.
<!-- Widget.vue -->
const props = defineProps({ theme: String });
// uses props.theme to style itselfPor que isso é prejudicial
O encadeamento de props causa problemas:
- Código repetitivo em cada componente intermediário
- As refatorações quebram muitos arquivos quando o nome da propriedade muda
- Props intermediárias ocultam o que cada componente realmente precisa
- É difícil adicionar novos valores compartilhados
Fica pior com muitos valores
Agora adicione user, locale e permissions. Cada um precisa ser encaminhado pelas quatro camadas, multiplicando o código repetitivo.
<Layout
:theme="theme"
:user="user"
:locale="locale"
:permissions="permissions"
/>Nem todo valor compartilhado pertence às props
Props são excelentes para a comunicação direta entre componente pai e filho. Mas, para valores necessários em uma subárvore profunda — theme, usuário atual e i18n —, encaminhá-los não é a ferramenta adequada. É preciso uma forma de fornecer dados diretamente a todos os descendentes.
Introdução a provide e injeção
O Vue oferece a API provide e inject, que permite a um ancestral fornecer dados que qualquer descendente pode solicitar diretamente, ignorando todas as camadas intermediárias. As próximas lições abordam o fornecimento e a injeção.
Verificação rápida
O que melhor descreve o encadeamento de props?
Recapitulação
Você viu como o encadeamento de props obriga cada componente intermediário de uma árvore profunda a declarar e encaminhar props que não utiliza, criando código repetitivo e refatorações frágeis. Provide e injeção são a solução mais organizada para valores compartilhados profundamente.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “O problema da prop drilling” é grátis?
Sim — o texto completo de “O problema da prop drilling” é 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 “O problema da prop drilling”?
Por que a prop drilling prejudica a manutenibilidade, o que provide/inject resolve e quando usar esse recurso. 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 1 de 4.
Quanto tempo leva a aula “O problema da prop drilling”?
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
- O problema da prop drilling
- provide() em componentes pais
- inject() em componentes filhos
- Provide/Inject para estado no nível da aplicação