Quelles sont les nouvelles fonctionnalités de vue3.0

Evan You (You Yuxi) a présenté un aperçu de Vue 3 dans son discours d'ouverture à Vue Toronto le matin du 16 novembre 2018. Tirant parti des nouvelles fonctionnalités prises en charge par les navigateurs modernes, Vue 3 sera une version puissante et améliorée de Vue.js que nous connaissons et aimons déjà.

Pour résumer, Vue 3 mérite d'être attendu dans les aspects suivants :

Plus rapide

Plus petit

Plus facile à maintenir

Plus de support natif

Plus facile à développer et à utiliser

Plus rapide :

Réécrire le DOM virtuel (Virtual DOM Rewrite)

Avec Virtual DOM Rewrite, nous peut s'attendre à davantage d'indices au moment de la compilation pour réduire la surcharge d'exécution. La réécriture inclura un code plus efficace pour créer des nœuds virtuels.

Génération de slots optimisée

Dans la version actuelle de Vue, lorsque le composant parent est restitué, ses composants enfants doivent également être restitués (mise à jour du 20 novembre : cette phrase n'est pas rigoureuse et peut facilement être trompeur. Je pense qu'il est nécessaire d'expliquer : le nouveau rendu des composants 2.0 se fait au niveau de la granularité du composant, à moins que les données modifiées ne soient les accessoires du sous-composant. être déclenché. Citation de : https://juejin.im/pin/5bf28ddd6fb9a056783705fc). Avec Vue 3, les composants parents et enfants peuvent être restitués indépendamment.

Histing d'arbre statique

Utilisez le levage d'arbre statique, ce qui signifie que le compilateur de Vue 3 sera capable de détecter ce qu'est un composant statique puis de le hisser, réduisant ainsi les coûts de rendu. Il pourra ignorer le processus de mise à jour de toute la structure arborescente.

Levage d'accessoires statiques

De plus, nous pouvons nous attendre à un levage d'accessoires statique, où Vue 3 ignorera le processus de correction qui ne modifie pas les nœuds.

Mécanisme d'observateur basé sur un proxy

Actuellement, le système réactif de Vue utilise les getters et setters de Object.defineProperty. Cependant, Vue 3 utilisera le proxy ES2015 comme mécanisme d'observation. Cela élimine les avertissements existants, double la vitesse et économise la moitié de la surcharge de mémoire.

Pour continuer à prendre en charge IE11, Vue 3 publiera une version prenant en charge l'ancien mécanisme d'observateur et la nouvelle version Proxy.

Plus petit :

Vue est déjà très petit, environ 20 Ko compressé au moment de l'exécution. Mais nous pouvons nous attendre à ce qu'il soit encore plus petit, avec le nouveau runtime de base mesurant environ 10 Ko gzippé. Cela sera accompli en grande partie en éliminant les bibliothèques inutilisées (également connu sous le nom de Tree Shaking). Par exemple, si vous n'utilisez pas d'élément de transition, il ne sera pas inclus.

Plus maintenable :

Bien que la plupart des développeurs Vue ne travaillent pas sur la bibliothèque elle-même, il est bon de savoir que Vue 3 apportera plus de maintenabilité au code source maintenu. Non seulement il utilisera TypeScript, mais de nombreux packages seront découplés, ce qui rendra tout plus modulaire.

Plus de support natif

Le noyau d'exécution sera également indépendant de la plate-forme, ce qui permettra à Vue de travailler plus facilement avec n'importe quelle plate-forme telle que le Web, iOS ou Android.

Plus facile à utiliser pour le développement

Le module Observer a été décompressé dans son propre package, vous permettant de l'utiliser de nouvelles manières

Suivi re La position du rendu sera également plus facile. Dans l'exposé d'Evan, il a fait du codage en direct et a montré comment tracer une application Vue (en utilisant le code ci-dessous) pour découvrir ce qui déclenche le nouveau rendu d'un composant. Ceci est utile dans les applications plus volumineuses et pour le réglage fin des performances.

Vue 3.0 améliorera également la prise en charge de TypeScript, permettant une vérification de type avancée et des erreurs et avertissements utiles dans l'éditeur.

API Experimental Hooks

Lorsque nous devons partager le comportement entre deux composants dans Vue, nous utilisons généralement des Mixins. Cependant, Evan essaie d'utiliser l'API Hooks pour éviter certains problèmes liés aux Mixins et être plus à l'aise avec le code idiomatique de Vue.

Prise en charge expérimentale du découpage temporel

Lorsque de nombreux composants tentent d'effectuer un nouveau rendu en même temps, n'importe quel navigateur peut commencer à ralentir, entraînant une expérience utilisateur dégradée.

Evan a montré comment il essayait d'utiliser Time Slicing pour décomposer l'exécution de JS en parties qui seraient transmises au navigateur s'il y avait une interaction utilisateur à gérer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!