Vue 3 va devenir plus rapide

Cette année, l'un des événements les plus marquants du monde du Frontend a été la publication du prochain référentiel Vue - une partie des fonctionnalités de la troisième version de VueJS. Cet article fournit un aperçu des nouvelles fonctionnalités de tueur de VueJS. Au moment de la publication de l'article, le référentiel était en statut pré-alpha . Les plans de sortie peuvent être consultés sur Roadmap

Contexte

En février 2018, Evan You, le créateur de Vue.js, a partagé ses plans pour la version 3 du framework populaire:

• Divisez la fonctionnalité en packages pour isoler la portée
• TypeScript apparaît dans la base de code
• Vue 3 sera rétrocompatible avec la 2ème version (c'est-à-dire ne cassera pas l'ancien code)
• Les observateurs de la version 3.0 sont basés sur Proxy, ce qui augmentera la vitesse de rendu et supprimera un certain nombre de restrictions imposées par Object.defineProperty
• Vous pourrez débuter en utilisant les nouveaux crochets renderTracked et renderTriggered
• Grâce à l'introduction du tremblement d'arbre (à l'exclusion des directives inutilisées de la build), la taille du framework sera inférieure à 10 Ko sous forme compressée
• Optimisation des emplacements
• Les performances en vue 3 s'amélioreront de 100%

Des fonctionnalités telles que les composants intégrés et les aides à l'exécution des directives (modèle V) sont désormais importées à la demande et arborescentes
Evan vous

Le compilateur suivra l'existence des directives et les inclura dans la construction au stade de la compilation.

Dans le processus de travail sur Vue 3, Evan a refusé de réécrire les composants dans les classes et a plutôt implémenté une API fonctionnelle.

Étant donné que la nouvelle version utilisera des proxys qui ne sont pas pris en charge dans IE, Evan prévoit de créer une version distincte pour IE11. Au total, 4 phases promettent:

1. Phase Alpha - étape de finalisation du compilateur et rendu ssr
2. Phase bêta - étape de finalisation des bibliothèques principales (Vue Router, Vuex, Vue CLI, Vue DevTools)
3. Phase RC - Phase de pré-lancement incluant Vue 2.0
4. Version IE11
5. Version finale

Evan a prévu une version finale pour 2019, mais le projet est toujours en phase pré-alpha.

Vue 3 sera plus rapide

Grâce à un certain nombre d'innovations, Vue 3 deviendra 2 fois plus rapide que la version précédente.

Observation et réactivité par proxy

L'une des principales innovations a été la modification du mécanisme de surveillance des objets, des getters et setters d'Object.defineProperty à Proxy. Maintenant, Vue peut suivre la suppression et l'ajout de propriétés d'objets réactifs sans utiliser Vue.set et Vue.delete. L'innovation a augmenté la vitesse de rendu et de script et réduit la consommation de mémoire de 2 fois! Vous pouvez comparer les performances de Vue 2 et Vue 3 en téléchargeant le référentiel d'Ilya Klimov

Comparaison des performances de Vue 2 (gauche) et Vue 3 (stade pré-alpha, droite)


Grâce aux proxys, la réactivité ne sera pas perdue lors du changement des manipulations d'objets qui ne sont pas suivies dans Vue 2. Maintenant, Vue ne traversera pas récursivement les propriétés d'un objet pour calculer les changements.

Ce qui est fait des promesses:

• Les descendants et les parents sont redessinés indépendamment
• La taille de Vue 3 est passée de 20 Ko à 10 Ko sous forme compressée
• TypeScript ajouté

Autres optimisations:

• Vue 3 mémorisera le contenu statique et corrigera uniquement les données dynamiques
• Les accessoires statiques augmentent la portée
• Pour faciliter le développement, le code Vue 3 est décomposé en packages modulaires.
• Le package runtime-core est fait multiplateforme
• Au lieu de classes, Evan a ajouté une fonction de configuration et des crochets qui rendent le code propre, organisé et réutilisable *
• Tranchage temporel *. L'exécution du code JS est découpée en morceaux sans bloquer l'interaction de l'utilisateur avec l'application

Les astérisques indiquent l'API expérimentale .
Mise à jour: Plus tard, Evan a décidé d'abandonner la réduction du temps.

Inspiré par le HOC, Reacta Evan a implémenté des fonctions de configuration avec une logique réutilisable et des crochets personnalisés. Contrairement aux mixins, les hooks de cycle de vie ne se remplacent pas.

Patch VDom amélioré

Joystick de contenu statique



Le contenu statique est déplacé en dehors du patch VDom lors de la compilation du modèle. Vue a été inspiré par Svelte pour ce faire:

 <div>Hello, {{name}}</div> 

Ici, l'objet et le contexte modifiés sont transmis. Si modifié contient une variable réactive, il est mis à jour en contexte.

 p(changed, ctx) { if(changed.name) { set_data(t1, ctx.name); } } 

Dans l'implémentation précédente, le compilateur Vue a parcouru tous les nœuds, y compris les nœuds statiques:

 function render(){ const children = []; for(let i = 0; i < 5; i++) { children.push(h('p', { class: 'text' }, i === 2 ? this.message : 'Lorem upsum')) } return h('div', { id: 'content' }, children) } 

Nouvelle stratégie de compilation de modèles

Dans la nouvelle version, le modèle est divisé en blocs:

• Le modèle est divisé en blocs
• La structure des nœuds à l'intérieur de chaque bloc est complètement statique.
• Pour suivre les valeurs dynamiques dans un bloc, un seul tableau plat est requis, où elles sont placées

Avec la nouvelle stratégie, les performances dépendent directement de la quantité de contenu dynamique au lieu de la taille du modèle.

Vue 3 sera mieux adaptée aux grands projets

Les grands projets sont confrontés aux problèmes suivants lors de l'utilisation de Vue:

1. Prise en charge de TypeScript pas parfaite
2. Composants massifs et difficiles à prendre en charge
3. Absence d'un modèle simple pour réutiliser le code

Initialement, il était prévu d'ajouter des classes pour prendre en charge TS. Mais l'équipe Vue a rencontré des problèmes:

• Le mélange d'accessoires et d'autres attributs avec cela est problématique
• Les décorateurs pour les classes ES6 dans TC39 sont instables

L'équipe d'Evan a demandé l'aide d'experts TC39 et a découvert qu'une implémentation similaire pouvait entrer en conflit avec des plugins qui mélangent divers accessoires et attributs dans le contexte Vue.

Potentiellement, ces problèmes pourraient être résolus par les décorateurs, mais ils sont toujours en cours de développement.

API de composition

L'équipe Vue a été inspirée par les hooks React et a décidé de créer une API similaire. Il est facultatif et est en cours de développement et de discussion, donc certains noms peuvent changer.
Le concept principal de ce changement est d'organiser le code du composant de manière plus logique, en le divisant en blocs sémantiques. Vous pouvez en savoir plus sur l' API de composition dans la documentation .

Un exemple d'utilisation de Vue 3. Un composant est divisé en fonctions logiques, à l'intérieur desquelles vous pouvez utiliser des crochets de réactivité et de cycle de vie.

Importez les nouveaux hooks depuis l'API de composition:

 import { reactive, computed, onMounted } from '@vue/composition-api'; export default { setup() { const { state } = countAnimal("rabbit") const { getType, anotherState } = anotherCount() return { state, getType, anotherState } } } 

La fonction countAnimal a des propriétés réactives count, animal et la méthode d' incrémentation . Avec un compteur impair, le nom de l'animal change. Le compteur démarre lorsque le composant est monté.

 function countAnimal(name) { const state = reactive({ count: 0, animal: computed(() => state.count % 2 ? name : 'bear') }) function increment() { setTimeout(() => { state.count++; increment() }, 1000) } onMounted(() => { increment() }) return { state } } 

Nous créons une autre fonction anotherCount , qui contient également la méthode d' incrémentation et d' état avec le compteur et le nom de l'animal. La méthode getType transmet le nom de l'animal à partir du modèle.

 function anotherCount() { const anotherState = reactive({ count: 0, animal: 'fox' }) function getType(name) { return name == 'bear' ? 'slow' : 'fast' } function increment() { setTimeout(() => { anotherState.count+=10; increment() }, 1000) } onMounted(() => { increment() }) return { getType, anotherState } } 

Le modèle affiche 2 compteurs et 2 noms d'animaux. Le type de course varie en fonction du nom de l'animal.

 <template> <div> <div>Count {{state.animal}}: {{ state.count }}</div> <div>{{state.animal}} runs {{getType(state.animal)}}</div> <div>Another: Count {{anotherState.animal}}: {{ anotherState.count }}</div> </div> </template> 

De nouveaux crochets sont utilisés dans la configuration sans casser l' ancienne API. Notez que onMounted fait référence à un hook de cycle de vie à un seul composant.

Cette API présente plusieurs avantages:

• Les crochets du cycle de vie ne se frottent pas
• Source claire de propriétés
• Aucune instance de composant supplémentaire n'est créée

Conclusion

Les changements les plus importants dans Vue 3 sont listés ci-dessus. La plupart des améliorations seront cachées sous le capot du code généré par le compilateur.

Améliorations majeures:

• Le code généré est optimal pour le compilateur JS
• Bundle généré plus facilement
• Les composants parents / enfants sont redessinés grâce à un algorithme de correction amélioré

Vue s'est imposé comme l'un des frameworks les plus rapides et les plus optimaux. La nouvelle version deviendra encore plus rapide et plus facile. Vue 3 est idéal pour le Web mobile et axé sur les performances d'aujourd'hui. Les commentaires sur les modifications futures peuvent être laissés dans le RFC officiel (demande de commentaires).
PS Merci d'avoir corrigé les fautes de frappe.