De quoi se passionner dans Vue 3.0

Ce message vous présente toutes les nouvelles fonctionnalités qui vous passionneront dans Vue 3.0 en attendant la grande version.

Vue.js

Vue.js créé par Evan You et 284+ communauté amoureux, compte plus de 1,2 million d'utilisateurs et constitue un cadre très progressif pour la création d'interfaces utilisateur. Il se compose d'une bibliothèque centrale accessible qui se concentre uniquement sur la couche de vue et d'un écosystème de bibliothèques de support qui vous aide à gérer la complexité des grandes applications d'une seule page.

En attendant la troisième version de Vue, Evan You et Vue L'équipe a assisté à des conférences et diffusé une prise de conscience massive des grandes fonctionnalités de cette version, dont la date de sortie officielle est prévue depuis un certain temps au premier trimestre 2020 .

Voici un aperçu des principales fonctionnalités de Vue 3.0:

API de composition

Elle s'appelait auparavant API de fonction, et c'est une façon nouvelle et bien meilleure de gérer la logique de Vue en ce qui concerne l'organisation du code dans les composants et la réutilisation du code. Initialement, avec Vue 2.x, nous ajoutons de la logique à notre code en remplissant la section des propriétés des options du composant. Cette approche est connue sous le nom de l'opt modèle API d'ions. Avec cela, nous utilisons des données, des calculs, des mixins, des méthodes et autres.

C'est un bon moyen de définir la logique, mais pas très bien sur les compilateurs pour accéder et faire correspondre notre logique. En outre, vous devez toujours gérer le mot clé "this" lorsque vous essayez d'accéder à des éléments ou de les référencer, de sorte que des éléments tels que la vérification de type n'étaient pas si faciles à réaliser. L'API de composition résout ce problème.

De plus, pour la réutilisation de code, le transfert de code d'un composant à un autre se fait normalement avec des emplacements ou des mixages étendus dans Vue 2.x. Mais maintenant, vous pouvez utiliser des fonctions JavaScript pures comme une autre façon, puis les réutiliser directement dans vos composants Vue. Cela conduit à utiliser beaucoup moins de code et également à réduire le temps de compilation. La syntaxe de l'API de composition ressemble à ceci:

Réécriture du DOM virtuel pour des performances plus rapides et meilleures

Vue 3 est hautement optimisé pour la vitesse, avec une amélioration de près de 100% de la vitesse par rapport à la version 2. Pour que cela soit possible, le DOM virtuel a été réécrit pour réduire considérablement temps de montage et même correction. Il y avait aussi du travail sur la génération de slots, en s'assurant que les dépendances sont correctement suivies par leurs instances. Le levage d'arbre statique rend également la correction d'arborescence encore plus efficace pour la vitesse. Vue a introduit la prise en charge de TypeScript dans la version 2, mais promet de la conserver même lorsque la nouvelle API de composition sera intégrée. Des choses comme générer de nouveaux projets qui utilisent de manière transparente la version TypeScript actuelle sont quelque chose d'incroyable à attendre.

Mises à jour de l'API de montage global

Avec la version 2.x, pour configurer n'importe quelle application Vue, nous utilisons l'objet Vue global comme ceci:

 importer Vue depuis 'vue'
importer l'application depuis ‘./App.vue’
Vue.config.ignoredElements = [/^app-/]
new Vue ({render: h => h (App)}). $ mount (‘# app’)

Cela signifie toujours que toutes les modifications apportées à l'objet Vue affectent tous les composants et instances d'application. Mais dans cette nouvelle version, elle est plutôt étendue à une application Vue spécifiée, comme createApp ci-dessous:

 import {createApp} de ‘vue’
importer l'application depuis ‘./App.vue’
const app = createApp (App)
app.config.ignoredElements = [/^app-/]
app.mount («# app»)

Donc, des choses comme les changements dans les mixins définis globalement initiés par des solutions externes n'affecteront plus votre application entière dans cette version.

Mises à jour du modèle V

Si vous utilisez Vue, vous savez déjà que les modèles V sont utilisé pour la liaison de données bidirectionnelle sur les composants Vue. Dans Vue 2.x, vous obtenez un modèle en v pour un composant, mais dans cette nouvelle version, il y a d'excellentes nouvelles!

Vous pouvez maintenant avoir plusieurs déclarations et liaisons de modèle en v par composant. En permettant de leur donner des noms de propriété, vous pouvez en avoir autant que vous le souhaitez.

Quelque chose comme ça est maintenant possible:

Fragments

Les fragments sont des balises d'encapsulation de modèle utilisées pour structurer votre présentation sans avoir d'impact sur votre sémantique. Comme avoir une balise div qui n'apparaît pas sur le navigateur mais qui peut être stylisée, elles ne servent qu'à un seul but: envelopper le contenu. Les fragments ont été introduits pour la première fois dans React 16, et Vue l'a également introduit dans le noyau Vue. Il possède déjà un plugin, que certains développeurs de Vue ont utilisé.

Les fragments sont importants car les modèles Vue ne peuvent avoir qu'une seule balise, donc la logique ci-dessous retournerait une erreur de syntaxe:

Mais avec des fragments, vous pouvez envelopper les divs dans une seule étiquette, ce qui n'affecterait pas la structure ni l'apparence de votre présentation. Avec Vue 2.x, vous pouvez installer des fragments en tant que plugin comme ceci:

 import {Plugin} de "vue-fragments"; Vue.use (Plugin);

Et puis utilisez-le comme ceci:

Les portails sont une sorte de canal sûr pour rendre les nœuds enfants dans un nœud DOM qui est en dehors de la lignée DOM du parent, comme la façon dont les modaux et les fenêtres contextuelles sont rendus . Normalement, vous trouverez un moyen de gérer cela avec soin avec CSS, mais les frameworks JavaScript comme React fournissent des portails dans le noyau. Cela va maintenant être une fonctionnalité prête à l'emploi de Vue version 3. Actuellement, il existe une bibliothèque de portail Vue pour utiliser les portails. Voici une vue rapide de la bibliothèque portal-vue pour Vue 2:

 
  
 Le contenu de cet emplacement sera affiché à l'emplacement du portail cible avec le nom «destination». 

 

Cela arrive dans Vue Core à partir de la version 3.

Mise à jour de l'API des directives personnalisées

Cette API sera légèrement différente de celle actuelle utilisée par les développeurs de Vue:

 const MyDirective = {
  bind (el, binding, vnode, prevVnode) {},
  inséré () {},
  mise à jour() {},
  componentUpdated () {},
  unbind () {}
}

Désormais, les crochets du cycle de vie des composants seront correctement et intuitivement organisés afin d'être facilement compris par les développeurs Vue expérimentés et les nouveaux développeurs Vue. Il devrait ressembler à ceci à l'avenir:

 const MyDirective = {
  beforeMount (el, binding, vnode, prevVnode) {},
  monté() {},
  beforeUpdate () {},
  mis à jour() {},
  beforeUnmount () {},
 // nouveau non monté () {}
}

Ceci est un changement de rupture; cependant, avec une mise à jour, une construction de compatibilité le couvre facilement.

La voie à suivre: RFC

Si vous lisez le blog détaillé du plan de la feuille de route d'Evan You il y a quelques mois, vous avez remarqué 3 est maintenant au stade RFC. Après avoir exécuté des commentaires internes pour le prototype d'exécution de la version 3, il existe maintenant un forum pour les demandes de commentaires sur les fonctionnalités et modifications possibles. Le processus «RFC» (demande de commentaires) est destiné à fournir un chemin cohérent et contrôlé pour que de nouvelles fonctionnalités entrent dans le cadre Vue. De nombreuses modifications, y compris des corrections de bogues et des améliorations de la documentation, peuvent être mises en œuvre et examinées via le flux de travail normal de demande d'extraction GitHub. Tout ce que vous avez à faire est de documenter:

• la portée du changement que vous proposez.
• Raisonnement derrière le changement: que gagnons-nous et quels compromis sont faits?
• Chemin de mise à niveau: peut-il être introduit d'une manière totalement rétrocompatible, via une couche de compatibilité amovible ou des codemods?

Conclusion

Ceci est un aperçu rapide de certaines des fonctionnalités qui seront livrées avec la troisième version de Vue.js. La version Alpha sera expédiée n'importe quel jour maintenant. L'équipe de Vue a continué de veiller à ce que chaque version devienne plus rapide, plus simple et plus efficace, et c'est incroyablement admirable. Quelle est votre nouvelle fonctionnalité préférée?