Quoi de neuf dans Vue 3? – Magazine Smashing

A propos de l'auteur

Développeur front-end basé à Lagos, au Nigeria. Il aime convertir des conceptions en code et créer des éléments pour le Web.
Plus à propos
Timi
…

Avec la sortie de Vue 3, les développeurs doivent effectuer la mise à niveau de Vue 2 car il est livré avec une poignée de nouvelles fonctionnalités très utiles pour créer des composants faciles à lire et maintenables et des moyens améliorés de structurer notre application dans Vue. Nous allons examiner certaines de ces fonctionnalités dans cet article.

À la fin de ce tutoriel, les lecteurs le feront;

1. Savoir a propos provide / inject et comment l'utiliser.
2. Avoir une compréhension de base de Teleport et comment l'utiliser.
3. Connaître les fragments et comment les utiliser.
4. Connaître les modifications apportées à l'API Global Vue.
5. Connaître les modifications apportées à l'API Events.

Cet article s'adresse à ceux qui ont une bonne compréhension de Vue 2.x. Vous pouvez trouver tout le code utilisé dans cet exemple dans GitHub.

provide / inject

Dans Vue 2.x, nous avions props cela a facilité la transmission des données (chaîne, tableaux, objets, etc.) d'un composant parent directement à son composant enfants. Mais au cours du développement, nous avons souvent trouvé des cas où nous devions transmettre des données du composant parent à un composant profondément imbriqué, ce qui était plus difficile à faire avec props. Cela a abouti à l'utilisation de Vuex Store, Event Hub et parfois à la transmission de données via les composants profondément imbriqués. Regardons une application simple;

Il est important de noter que Vue 2.2.0 est également fourni avec provide / inject qu'il n'était pas recommandé d'utiliser dans le code d'application générique.

# parentComponent.vue

# childComponent.vue

# colorComponent.vue

Ici, nous avons une page de destination avec une liste déroulante contenant une liste de couleurs et nous transmettons la sélection color à childComponent.vue comme accessoire. Ce composant enfant a également un msg prop qui accepte un texte à afficher dans la section modèle. Enfin, ce composant a un composant enfant (colorComponent.vue) qui accepte un color prop du composant parent qui est utilisé pour déterminer la classe du texte de ce composant. Ceci est un exemple de transmission de données à travers tous les composants.

Mais avec Vue 3, nous pouvons le faire de manière plus propre et plus courte en utilisant la nouvelle paire Fournir et injecter. Comme son nom l'indique, nous utilisons provide en tant que fonction ou objet pour rendre les données disponibles à partir d'un composant parent vers l'un de ses composants imbriqués, quelle que soit la profondeur d'imbrication d'un tel composant. Nous utilisons la forme objet lors de la transmission de valeurs codées en dur à provide comme ça;

# parentComponent.vue

Mais pour les instances où vous devez transmettre une propriété d'instance de composant à provide, nous utilisons le mode fonction donc c'est possible;

# parentComponent.vue

Puisque nous n'avons pas besoin du color accessoires dans les deux childComponent.vue et colorComponent.vue, nous nous en débarrassons. L'avantage d'utiliser provide est que le composant parent n'a pas besoin de savoir quel composant a besoin de la propriété qu'il fournit.

Pour utiliser cela dans le composant qui en a besoin dans ce cas, colorComponent.vue nous faisons cela;

# colorComponent.vue

Ici, nous utilisons inject qui prend dans un tableau des variables requises dont le composant a besoin. Dans ce cas, nous n'avons besoin que du color propriété donc nous ne faisons que passer cela. Après cela, nous pouvons utiliser le color de la même manière que nous l'utilisons lors de l'utilisation d'accessoires.

Nous pouvons remarquer que si nous essayons de sélectionner une nouvelle couleur à l'aide du menu déroulant, la couleur ne se met pas à jour dans colorComponent.vue et c'est parce que par défaut les propriétés dans provide ne sont pas réactifs. Pour résoudre ce problème, nous utilisons computed méthode.

# parentComponent.vue

Ici, nous importons computed et passer notre selectedColor afin qu'il puisse être réactif et se mettre à jour lorsque l'utilisateur sélectionne une couleur différente. Lorsque vous passez une variable à la méthode calculée, elle retourne un objet qui a un value. Cette propriété détient le valeur de votre variable donc pour cet exemple, il faudrait mettre à jour colorComponent.vue ressembler à ça;

# colorComponent.vue

Ici, on change color à color.value pour représenter le changement après avoir fait color réactif en utilisant le computed méthode. À ce stade, le class du texte de ce composant changerait toujours à chaque fois selectedColor changements dans le composant parent.

Téléportation

Il existe des cas dans lesquels nous créons des composants et les plaçons dans une partie de notre application en raison de la logique utilisée par l'application, mais sont destinés à être affichés dans une autre partie de notre application. Un exemple courant de cela serait un modal ou un popup qui est destiné à afficher et à couvrir tout l'écran. Bien que nous puissions créer une solution de contournement pour cela à l'aide de CSS position propriété sur de tels éléments, avec Vue 3, nous pouvons également utiliser Teleport.

La téléportation nous permet de retirer un composant de sa position d'origine dans un document, par défaut #app conteneurs Les applications Vue sont encapsulées et déplacées vers n'importe quel élément existant sur la page où elles sont utilisées. Un bon exemple serait d'utiliser Teleport pour déplacer un composant d'en-tête de l'intérieur du #app div en un header Il est important de noter que vous ne pouvez vous téléporter que vers des éléments qui existent en dehors du DOM Vue.

Le composant Teleport accepte deux accessoires qui déterminent le comportement de ce composant et ils le sont;

1. to
   Cet accessoire accepte soit un nom de classe, un identifiant, un élément ou un attribut data- *. On peut aussi dynamiser cette valeur en passant un :to accessoire par opposition à to et changez dynamiquement l'élément de téléportation.
2. :disabled
   Cet accessoire accepte un Boolean et peut être utilisé pour basculer la fonction de téléportation sur un élément ou un composant. Cela peut être utile pour modifier dynamiquement la position d'un élément.

Un exemple idéal d'utilisation de Teleport ressemble à ceci;

# index.html**




    
    
    
    
    




    
    

    

Par défaut index.html fichier dans votre application Vue, nous ajoutons un header élément parce que nous voulons téléporter notre composant d'en-tête à ce point dans notre application. Nous avons également ajouté une classe à cet élément pour le style et pour faciliter le référencement dans notre composant Teleport.

# Header.vue **

Ici, nous créons le composant d'en-tête et ajoutons un logo avec un lien vers la page d'accueil de notre application. Nous ajoutons également le composant Teleport et donnons le to prop une valeur de header car nous voulons que ce composant soit rendu à l'intérieur de cet élément. Enfin, nous importons ce composant dans notre application;

# App.vue

Dans ce fichier, nous importons le composant d'en-tête et le plaçons dans le modèle afin qu'il soit visible dans notre application.

Maintenant, si nous inspectons l'élément de notre application, nous remarquerons que notre composant d'en-tête est à l'intérieur du headerélément;

Fragments

Avec Vue 2.x, il était impossible d'avoir plusieurs éléments racine dans le template de votre fichier et comme solution de contournement, les développeurs ont commencé à encapsuler tous les éléments dans un élément parent. Bien que cela ne semble pas être un problème grave, il existe des cas où les développeurs souhaitent rendre un composant sans conteneur entourant ces éléments, mais doivent se contenter de cela.

Avec Vue 3, une nouvelle fonctionnalité appelée Fragments a été introduite et cette fonctionnalité permet aux développeurs d'avoir plusieurs éléments dans leur fichier de modèle racine. Donc, avec Vue 2.x, voici à quoi ressemblerait un composant de conteneur de champ d'entrée;

# inputComponent.vue

Ici, nous avons un composant d'élément de formulaire simple qui accepte deux accessoires, label et type, et la section de modèle de ce composant est enveloppée dans un div. Ce n'est pas nécessairement un problème, mais si vous voulez que l'étiquette et le champ de saisie soient directement à l'intérieur de votre form élément. Avec Vue 3, les développeurs peuvent facilement réécrire ce composant pour ressembler à ceci;

# inputComponent.vue

Avec un seul nœud racine, les attributs sont toujours attribués au nœud racine et sont également appelés Attributs non accessoires. Ce sont des événements ou des attributs transmis à un composant qui n'ont pas de propriétés correspondantes définies dans props ou emits. Des exemples de tels attributs sont class et id. Il est cependant nécessaire de définir explicitement à quels éléments d'un composant de nœud multi-racine doit être attribué.

Voici ce que cela signifie en utilisant le inputComponent.vue d'en haut;

1. Lors de l'ajout class à ce composant dans le composant parent, il faut spécifier quel composant cela class être attribué autrement, l'attribut n'a aucun effet.

Lorsque vous faites quelque chose comme ça sans définir où les attributs doivent être attribués, vous obtenez cet avertissement dans votre console;

Et le border n'a aucun effet sur le composant;

1. Pour résoudre ce problème, ajoutez un v-bind="$attrs" sur l'élément sur lequel vous souhaitez que ces attributs soient distribués;

Ici, nous disons à Vue que nous voulons que les attributs soient distribués au label élément qui signifie que nous voulons le awesome__class pour y être appliquée. Maintenant, si nous inspectons notre élément dans le navigateur, nous verrons que la classe a maintenant été ajoutée à label et donc une bordure est maintenant autour de l'étiquette.

API globale

Il n'était pas rare de voir Vue.component ou Vue.use dans main.js fichier d'une application Vue. Ces types de méthodes sont connus comme des API globales et il y en a un certain nombre dans Vue 2.x. L'un des défis de cette méthode est qu'elle rend impossible d'isoler certaines fonctionnalités sur une instance de votre application (si vous avez plus d'une instance dans votre application) sans que cela n'affecte les autres applications, car elles sont toutes montées sur Vue. C'est ce que je veux dire;

Vue.directive('focus', {
  inserted: el => el.focus()
})

Vue.mixin({
  /* ... */
})

const app1 = new Vue({ el: '#app-1' })
const app2 = new Vue({ el: '#app-2' })

Pour le code ci-dessus, il est impossible d'indiquer que la directive Vue soit associée à app1 et le Mixin avec app2 mais au lieu de cela, ils sont tous deux disponibles dans les deux applications.

Vue 3 est livré avec une nouvelle API globale pour tenter de résoudre ce type de problème avec l'introduction de createApp. Cette méthode retourne une nouvelle instance d'une application Vue. Une instance d'application expose un sous-ensemble des API globales actuelles. Avec cela, toutes les API (composant, mixin, directive, utilisation, etc.) qui mutent Vue de Vue 2.x vont maintenant être déplacées vers des instances d'application individuelles et maintenant, chaque instance de votre application Vue peut avoir des fonctionnalités qui leur sont uniques sans affecter les autres applications existantes.

Maintenant, le code ci-dessus peut être réécrit comme;

const app1 = createApp({})
const app2 = createApp({})
app1.directive('focus', {
    inserted: el => el.focus()
})
app2.mixin({
    /* ... */
})

Il est cependant possible de créer des fonctionnalités que vous souhaitez partager entre toutes vos applications et cela peut être fait en utilisant une fonction d'usine.

API d'événements

L’une des méthodes les plus couramment adoptées par les développeurs pour transmettre des données entre des composants qui n’ont pas de relation parent-enfant autre que l’utilisation de Vuex Store est l’utilisation du bus d’événements. L'une des raisons pour lesquelles cette méthode est courante est la facilité avec laquelle il est possible de la démarrer;

# eventBus.js

const eventBus = new Vue()

export default eventBus;

Après cela, la prochaine chose serait d'importer ce fichier dans main.js pour le rendre disponible dans le monde entier dans notre application ou pour l'importer dans les fichiers dont vous avez besoin;

# main.js

import eventBus from 'eventBus'
Vue.prototype.$eventBus = eventBus

Maintenant, vous pouvez émettre des événements et écouter les événements émis comme celui-ci;

this.$eventBus.$on('say-hello', alertMe)
this.$eventBus.$emit('pass-message', 'Event Bus says Hi')

Il y a beaucoup de base de code Vue qui est remplie de code comme celui-ci. Cependant, avec Vue 3, ce serait impossible à faire car $on, $off, et $once ont tous été supprimés mais $emit est toujours disponible car les composants enfants doivent émettre des événements vers leurs composants parents. Une alternative à cela serait d'utiliser provide / inject ou l'une des bibliothèques tierces recommandées.

Conclusion

Dans cet article, nous avons expliqué comment vous pouvez transmettre des données d'un composant parent à un composant enfant profondément imbriqué à l'aide du provide / inject paire. Nous avons également examiné comment nous pouvons repositionner et transférer des composants d'un point de notre application à un autre. Une autre chose que nous avons examinée est le composant de nœud multi-racine et comment nous assurer que nous distribuons les attributs afin qu'ils fonctionnent correctement. Enfin, nous avons également couvert les modifications apportées à l'API Events et à l'API globale.

Autres ressources

• «JavaScript Factory Functions with ES6 +», Eric Elliott, Medium
• «Utilisation du bus d'événements pour partager des accessoires entre des composants Vue», Kingsley Silas, CSS-Tricks
• Utilisation de plusieurs téléports sur la même cible, Vue.js Docs
• Attributs non-prop, documentation Vue.js
• Travailler avec la réactivité, Docs Vue.js
• teleport, Documents Vue.js
• Fragments, documentation Vue.js
• Syntaxe 2.x, documentation Vue.js

(ks, ra, il)