0Pricing
Vue Academy · Lezione

Il problema del prop drilling

Perché il prop drilling compromette la manutenibilità, cosa risolve provide/inject, quando utilizzarlo

Il problema del prop drilling è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Che cos'è il prop drilling

Il prop drilling consiste nel passare dati attraverso molti livelli di componenti solo per raggiungere un componente profondamente annidato. Ogni componente intermedio deve accettare e inoltrare la prop, anche se non la utilizza mai.

Un albero di componenti profondo

Immagini un albero: App -> Layout -> Page -> Section -> Widget. Il Widget in fondo ha bisogno del tema corrente, ma solo App, in cima, lo conosce.

App
  Layout
    Page
      Section
        Widget  <-- needs "theme"

Passaggio attraverso App

App contiene il tema e lo passa a Layout come prop.

<!-- App.vue -->
<Layout :theme="theme" />

Layout lo inoltra

Layout non usa il tema, ma deve dichiararlo e passarlo al livello successivo solo per consentirgli di raggiungere quel livello.

<!-- Layout.vue -->
const props = defineProps({ theme: String });
// template:
<Page :theme="props.theme" />

Anche Page lo inoltra

Page ripete lo stesso boilerplate: dichiarare e poi inoltrare, anche se non ha alcun interesse per il tema.

<!-- Page.vue -->
const props = defineProps({ theme: String });
<Section :theme="props.theme" />

Section lo inoltra di nuovo

Lo stesso accade in Section. Ogni livello aggiunge codice ripetitivo di collegamento che non ha nulla a che vedere con le responsabilità di quel livello.

<!-- Section.vue -->
const props = defineProps({ theme: String });
<Widget :theme="props.theme" />

Infine Widget lo utilizza

Solo in fondo Widget utilizza effettivamente il tema. I quattro livelli superiori erano puro passaggio.

<!-- Widget.vue -->
const props = defineProps({ theme: String });
// uses props.theme to style itself

Perché è problematico

Il prop drilling causa diversi problemi:

  • Boilerplate in ogni componente intermedio
  • I refactoring rompono molti file quando cambia il nome della prop
  • Le props intermedie nascondono ciò di cui ogni componente ha davvero bisogno
  • È difficile aggiungere nuovi valori condivisi

Con molti valori la situazione peggiora

Ora aggiunga user, locale e permissions. Ognuno deve essere passato attraverso tutti e quattro i livelli, moltiplicando il boilerplate.

<Layout
  :theme="theme"
  :user="user"
  :locale="locale"
  :permissions="permissions"
/>

Non tutti i valori condivisi appartengono alle props

Le props sono ottime per la comunicazione diretta tra componente padre e figlio. Tuttavia, per i valori necessari in profondità in un sottoalbero, come tema, utente corrente e i18n, inoltrarli non è lo strumento adatto. Serve un modo per fornire i dati direttamente a tutti i discendenti.

Introduzione a provide / inject

In Vue, provide / inject consente a un antenato di fornire dati che qualsiasi discendente può richiedere direttamente, saltando ogni livello intermedio. Nelle prossime lezioni verranno illustrati provide e inject.

Verifica rapida

Quale descrizione definisce meglio il prop drilling?

Riepilogo

Hai visto come il prop drilling costringa ogni componente intermedio di un albero profondo a dichiarare e inoltrare props che non utilizza, creando boilerplate e refactoring fragili. Provide/inject è la soluzione più pulita per i valori condivisi in profondità.

Domande Frequenti

La lezione «Il problema del prop drilling» è gratuita?

Sì — il testo completo di «Il problema del prop drilling» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Il problema del prop drilling»?

Perché il prop drilling compromette la manutenibilità, cosa risolve provide/inject, quando utilizzarlo Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Il problema del prop drilling»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Il problema del prop drilling
  2. provide() nei componenti padre
  3. inject() nei componenti figlio
  4. Provide/Inject per lo stato a livello di app
← Torna a Vue Academy