La prochaine version de Vue apporte de nombreuses améliorations par rapport à son prédécesseur. Il sera plus rapide, plus petit et offrira de nouvelles fonctionnalités. Dans cet article, nous passons en revue ce que Vue 3 offrira.
Au moment de la rédaction de cet article, Vue 3 est en version bêta, et la version stable devrait sortir dans la seconde moitié de 2020. La prochaine version introduit de nouvelles fonctionnalités et améliorations par rapport à Vue 2. Les objectifs de Vue 3 étaient de le rendre plus rapide, plus petit, plus facile à gérer et plus facile à utiliser pour cibler différentes plates-formes que le Web.
Nouvelle implémentation de réactivité basée sur des proxys
L'implémentation interne de Vue a a été réécrit pour utiliser les nouvelles fonctionnalités de langage qui ont été introduites dans ES2015. La prochaine version de Vue utilisera des mandataires pour son système de réactivité, au lieu de Object.defineProperty . Ce changement éliminera les mises en garde, qui sont actuellement présentes dans la deuxième version du framework. Par exemple, Vue n'est pas capable de détecter l'ajout et la suppression de propriété.
const vm = new Vue ( {
données : {
petName : 'Roger'
}
} )
vm . petAge = 2
De même, la mise à jour des éléments qui sont imbriqués dans un tableau ne sera pas non plus détectée.
const vm = [19659006] nouveau Vue ( {
données : {
myPets : [ 'dog' 'fish' 'cat' ]
}
} )
vm . myPets [ 2 ] = 'rat'
vm . items . length = 5
Pour résoudre ces problèmes, Vue fournit $ set et $ delete méthodes. Avec l'introduction de procurations, ces méthodes ne seront plus nécessaires. Les proxies sont désormais pris en charge dans tous les principaux navigateurs; malheureusement, il n'y a aucun moyen de les polyfill pour les anciens navigateurs comme Internet Explorer. Par conséquent, Vue 3 offrira deux versions, une avec une réactivité basée sur un proxy et une basée sur une ancienne implémentation de réactivité. Cela signifie bien sûr que les mises en garde mentionnées seront toujours présentes, mais vous pouvez utiliser Vue 3, même si vous devez prendre en charge des navigateurs plus anciens.
Améliorations des performances et réécriture de VirtualDOM
Vue 3 sera beaucoup plus rapide et plus petit que son prédécesseur. Un fichier compressé et minifié pour Vue@2.6.10 pèse environ 20 Ko, tandis que Vue 3 est estimé à la moitié de la taille. C'est une grande amélioration de la taille et améliorera le temps de chargement. Moins il y a de code, mieux c'est après tout.
De plus, l’équipe Vue a apporté de grandes améliorations à l’implémentation de virtualDOM qui a été réécrite à partir de zéro et permet un montage et des correctifs jusqu'à 100% plus rapides. L'image ci-dessous montre la comparaison des performances entre les versions 2.5 et 3. La nouvelle version est deux fois plus rapide et n'utilise que la moitié de la mémoire.
De plus, avec la nouvelle implémentation de virtualDOM , le runtime recevra plus d'indications sur la façon de traiter le code et de prendre des chemins rapides chaque fois que possible. Le compilateur créera également un meilleur code optimisé et des nœuds statiques de levage, pour accélérer et éviter le rendu inutile. levage et levage en ligne du manipulateur. Vous pouvez en savoir plus à ce sujet dans la présentation d'Evan ici .
TypeScript
L'équipe principale de Vue a décidé de passer de Flow à TypeScript pour le développement de Vue 3. Grâce à cela, les développeurs qui utilisent TypeScript pour créer leur application aura de meilleurs indices de type, et même s'ils n'utilisent pas TypeScript, certains éditeurs de code comme VS Code fourniront également plus d'informations pendant le développement. En plus de cela, il sera également plus facile d'utiliser TypeScript dans Vue 3. Dans Vue 2, la plupart des développeurs utilisent la bibliothèque vue-class-component mais grâce à l'API Composition, Vue sera plus compatible avec TypeScript
API de composition
L'API de composition est une nouvelle façon d'écrire une logique avec état dans les composants Vue. Jusqu'à présent, nous pourrions utiliser des mixins, des slots à portée ou des composants d'ordre supérieur, mais tous ont leurs inconvénients. Cette fonctionnalité est inspirée des crochets de React, mais un peu mieux, car elle évite quelques mises en garde. Par exemple, les hooks de Vue ne seront pas appelés sur chaque rendu, mais juste une fois, dans la méthode de configuration. Grâce à cela, il y aura moins de travail pour le ramasse-miettes.
De plus, ils peuvent être utilisés de manière conditionnelle, ne sont pas sensibles à l'ordre des appels et évitent un problème avec des valeurs périmées. Vous pouvez trouver plus d'informations sur les différences dans la documentation de l'API Composition . J'ai déjà écrit un article dédié à l'API de composition et comment elle peut être utilisée. Vous pouvez le trouver ici .
Packages découplés
Dans Vue 3, les packages internes sont divisés en fichiers séparés. Cela se traduira par un code source plus modulaire et maintenable pour l'équipe travaillant sur le framework. Cela facilitera également l’utilisation du moteur de rendu de Vue sur des cibles différentes du Web. De bons exemples sont Weex et NativeScript – ce sont des frameworks qui utilisent Vue pour créer des applications mobiles.
Native Portals
Normalement, les éléments sont rendus exactement là où ils sont définis. Cependant, nous aimerions parfois rendre des éléments ailleurs dans une application. Par exemple, si nous avons un composant modal global, ce serait bien de pouvoir l'ouvrir et de définir son contenu de n'importe où dans l'application. Pour le moment, cela est possible grâce au package portal-vue . Dans Vue 3, cette fonctionnalité est prête à l'emploi, mais elle s'appelle Teleport .
// Quelque part en hauteur dans votre application
// Plus bas dans l'application
J'ai été téléporté!
Fragments
À l'heure actuelle, un modèle Vue doit toujours avoir un élément racine comme ceci:
// Un élément racine uniquement dans un modèle
Inspiré des fragments de React, Vue 3 autorisera plusieurs nœuds racine. Ceci est très utile en particulier pour les éléments de liste et de tableau, car, par exemple, une ligne de tableau ou un élément de liste ne doit pas avoir de div comme parent.
// Cela fonctionne dans Vue 3
Dans Vue 2, pour obtenir le même résultat, il faudrait utiliser un composant fonctionnel:
export default {
fonctionnel : true
render ( h ) {
return [
h ([19659024] "li" {
domProps : {
textContent : "first li"
}
} )
h ( "li" {
domProps : {
textContent : "second li"
}
} )
] ;
}
}
Montage global
Most Vue les projets démarrent dans le fichier main.js où l'instance globale de Vue est créée et montée. D'autres bibliothèques et plugins seraient également ajoutés à cette instance de Vue. Dans Vue 3, une méthode appelée createApp sera utilisée pour créer une application Vue à la place. L'avantage de ceci est le fait que les bibliothèques tierces ne pourront pas apporter de modifications à notre instance d'application, par exemple en utilisant des mixins globaux, des filtres ou des directives.
Plusieurs v-models
Actuellement, un seul Le modèle v peut être utilisé sur un composant.
Vue 3 nous permettra d'utiliser plusieurs v-models sur un composant.
// Composant parent
// Composant de formulaire
Nouvelle API de directives personnalisées
L'API de création de directives personnalisées sera modifiée pour mieux s'aligner sur les hooks de cycle de vie de Vue.
Vue 2
const vue2directive = {
bind ( el binding vnode prevNode ) {}
inséré () {}
update ] () {}
componentUpdated () {}
unbind ( ) {}
}
Vue 3
const vue3directive = {
beforeMount ( el binding vnode prevVnode ) {}
monté [19659008] () {}
beforeUpdate () {}
updated () {}
beforeUnmount () {}
unmounted () {[19659008]}
}
Nouvelle méthode de cycle de vie – renderTriggered
Parfois, un composant peut être rendu et nous ne savons peut-être pas pourquoi. renderTriggered est un nouveau hook de cycle de vie qui peut être utilisé pour le découvrir.
const vm = {
renderTriggered ( e ) {
console . log ( ` $ { this . $ options . name } a été déclenché` e )
}
}
Suspense
Suspense est un autre nouveau composant ajouté à Vue 3. Le composant Suspense permettra affichage d'un contenu de secours pendant le chargement du composant passé dans l'emplacement par défaut.
Conclusion
Vue 3 est beaucoup plus rapide et plus petit, et il offrira beaucoup d'améliorations par rapport à son prédécesseur, ainsi que de nouvelles fonctionnalités utiles et passionnantes qui nous permettront d'écrire un code plus propre et plus maintenable. Vous pouvez déjà commencer à utiliser Vue 3 en utilisant vue-cli ou Vite un nouvel outil de création créé par Evan You.
Source link