Quoi de neuf dans Vue 3?

À propos de l'auteur

Développeur front-end basé à Lagos, Nigeria. Il aime convertir des conceptions en code et créer des éléments pour le Web.
En savoir plus sur
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. super utile 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:

1. Connaître fournir / injecter 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 accessoires qui facilitaient les choses pour passer des données (chaîne, tableaux, objets, etc.) d'un composant parent directement à son composant enfants. Mais pendant le développement, nous avons souvent trouvé des cas où nous devions passer des données du composant parent à un composant profondément imbriqué, ce qui était plus difficile à faire avec les accessoires . Cela a abouti à l'utilisation de Vuex Store, Event Hub et parfois à la transmission de données à travers les composants profondément imbriqués. Regardons une application simple:

Il est important de noter que Vue 2.2.0 est également livré avec provide / inject qui 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 couleur sélectionnée à childComponent.vue comme accessoire. Ce composant enfant a également un accessoire msg qui accepte un texte à afficher dans la section modèle. Enfin, ce composant a un composant enfant ( colorComponent.vue ) qui accepte un accessoire color du composant parent qui est utilisé pour déterminer la classe du texte de ce composant. Ceci est un exemple de passage de données à travers tous les composants.

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

 # parentComponent.vue

  

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

 # parentComponent.vue

  

Puisque nous n’avons pas besoin des accessoires color à la fois dans le 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 ceci dans le composant qui en a besoin dans ce cas, colorComponent.vue nous faisons ceci;

 # 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 de la propriété color donc nous ne passons que cela. Après cela, nous pouvons utiliser la couleur de la même manière que nous l'utilisons lorsque nous utilisons des 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 fournissent ne sont pas réactives. Pour résoudre ce problème, nous utilisons la méthode calculée .

 # parentComponent.vue

  

Ici, nous importons calculé et passons 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 renvoie un objet qui a une valeur . Cette propriété contient la valeur de votre variable donc pour cet exemple, nous devrons mettre à jour colorComponent.vue pour ressembler à ceci;

 # colorComponent.vue

  

Ici, nous changeons couleur en color.value pour représenter le changement après avoir rendu couleur réactif en utilisant la méthode calculée . À ce stade, la classe du texte de ce composant changerait toujours chaque fois que selectedColor change dans le composant parent.

Teleport

Il existe des cas où nous créons des composants et placez-les dans une partie de notre application en raison de la logique utilisée par l'application, mais sont destinées à être affichées 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 en utilisant la propriété position de CSS sur de tels éléments, avec Vue 3, nous pouvons également utiliser Teleport.

Teleport nous permet de retirer un composant de sa position d'origine dans un document, à partir du conteneur par défaut #app 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 div #app vers un en-tête Il est important de noter que vous ne pouvez vous téléporter que vers des éléments qui existent en dehors de le DOM Vue.

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

1. to
   Cet accessoire accepte soit un nom de classe, un id , un élément ou un attribut data – * . Nous pouvons également rendre cette valeur dynamique en passant un accessoire : à par opposition à à et changer l'élément de téléportation dynamiquement.
2. : disabled
   Cet accessoire accepte a 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 changer dynamiquement la position d'un élément.

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

 # index.html **




    
    
    
     <link rel = "icon" href = "<%= BASE_URL %> favicon.ico" />
    




    
    

    

Dans le fichier par défaut index.html de votre application Vue, nous ajoutons un élément header car nous voulons téléporter notre composant d'en-tête vers 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 à l'accessoire à 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 pour 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 élément header ;

Fragments

Avec Vue 2.x, il était impossible de avoir plusieurs éléments racine dans le modèle 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 sérieux, il existe des cas où les développeurs veulent rendre un composant sans conteneur entourant de tels éléments, mais doivent se débrouiller avec 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 template 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 élément form . Avec Vue 3, les développeurs peuvent facilement réécrire ce composant pour qu'il ressemble à ceci:

 # inputComponent.vue

Avec un seul nœud racine, les attributs sont toujours attribués au nœud racine et ils sont également connus sous le nom Attributs non prop . ] Ce sont des événements ou des attributs passés à un composant qui n'ont pas les 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 multi-nœud doit être attribué.

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

1. Quand en ajoutant classe à ce composant dans le composant parent, il faut spécifier à quel composant cette classe serait attribuée, sinon 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 la bordure n'a aucun effet sur le composant;

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

Ici, nous disons à Vue que nous voulons que les attributs soient distribués à l'élément label ce qui signifie que nous voulons que la awesome__class lui soit appliquée. Maintenant, si nous inspectons notre élément dans le navigateur, nous verrons que la classe a maintenant été ajoutée à label et qu'une bordure est désormais autour de l'étiquette.

Global API

Il n'était pas rare de voir Vue.component ou Vue.use dans main Fichier .js 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', {
  inséré: el => el.focus ()
})

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

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

Pour le code ci-dessus, il est impossible de dire que la Vue Directive soit associée à app1 et le Mixin à app2 mais à la place, ils 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 ont des fonctionnalités qui leur sont propres 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', {
    inséré: 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 plus courantes Les méthodes 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 du Vuex Store est l'utilisation du Event Bus . L'une des raisons pour lesquelles cette méthode est courante est qu'elle est facile à utiliser;

 # eventBus.js

const eventBus = new Vue ()

export par défaut eventBus;

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

 # main. js

importer eventBus depuis '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 dit Salut')

Il y a beaucoup de code de base de Vue qui est rempli 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 il est nécessaire pour que les composants enfants émettent 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 réussir données autour d'un composant parent jusqu'à un composant enfant profondément imbriqué en utilisant la paire fournir / injecter . 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
• « Using Event Bus pour partager les accessoires entre les composants Vue ”Kingsley Silas, CSS-Tricks
• Utilisation de plusieurs téléports sur la même cible Vue.js Docs
• Attributs non-accessoires Vue.js Docs
• Working With Reactivity Vue.js Docs
• teleport Vue.js Docs
• Fragments Vue.js Docs
• Syntaxe 2.x Vue.js Docs

(ks, ra, il)