Vue.js / Nuxt.js

Pattern avanzati di Vue

Provide/inject, custom directives, render functions, JSX, teleport, suspense, async components

24 domande da colloquio·
Senior
1

Qual è lo scopo principale di provide/inject in Vue 3?

Risposta

Provide/inject consente di passare dati da un componente padre a qualsiasi componente discendente senza passare le props attraverso ogni livello intermedio. Questo evita il 'props drilling', in cui le props devono essere passate attraverso più livelli di componenti che non ne hanno bisogno. È particolarmente utile per condividere dati globali come la configurazione di un tema o lo stato di autenticazione.

2

Come dichiarare un valore con provide in un componente che usa la Composition API?

Risposta

Nella Composition API si usa la funzione provide con due argomenti: una chiave (string o Symbol) e il valore da fornire. Per esempio all'interno di setup. Questo valore sarà accessibile ai componenti discendenti tramite inject. Usare i Symbol come chiavi garantisce l'unicità ed evita le collisioni di nomi.

3

Qual è la funzione principale della direttiva Teleport in Vue 3?

Risposta

Teleport consente di renderizzare il contenuto di un componente in un nodo del DOM diverso dalla sua posizione nell'albero dei componenti Vue. Viene tipicamente usato per modali, tooltip e notifiche che devono essere renderizzati nella radice del documento per evitare problemi di z-index e di posizionamento CSS. Il componente mantiene il suo contesto Vue e può accedere ai dati del genitore.

4

Quale attributo è obbligatorio per usare Teleport in Vue 3?

5

Che cos'è una custom directive in Vue?

+21 domande da colloquio

Padroneggia Vue.js / Nuxt.js per il tuo prossimo colloquio

Accedi a tutte le domande, flashcards, test tecnici, esercizi di code review e simulatori di colloquio.

Inizia gratis