Quelles sont les nouvelles fonctionnalités de vue3.0

Les nouvelles fonctionnalités de vue3.0 sont : 1. Les performances sont 1,2 à 2 fois supérieures à celles du bloc vue2.x ; 2. Prend en charge le tremblement d'arbre ; 3. Introduit l'API de composition ; 4. Expose l'API de rendu personnalisée ; 5 , trois nouveaux composants (Fragment, Téléportation, Suspense), etc. sont ajoutés.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 3.0, ordinateur DELL G3.

Six nouvelles fonctionnalités apportées par vue3

• Performances : 1,2 à 2 fois meilleures que le bloc vue2.x
• Prise en charge du tremblement d'arbre : Prise en charge compilation à la demande, taille plus petite
• API de composition : API combinée, similaire à React Hooks
• API de rendu personnalisé : expose l'API de rendu personnalisé
• Fragment, téléportation (Protal), Suspense : trois nouveaux composants
• Meilleur support de TypeScript : meilleur support de TS

Performance

Vue3.0 En termes de performances, il est 1,2 à 2 fois plus rapide que Vue2.x.

• Réécrire l'implémentation du DOM virtuel

• Compilation au moment de l'exécution

• Promotion statique et événement Détection Cache d'écoute

• Amélioration de la vitesse SSR

Support à trois secousses

Vue3.x Le Les API de base prennent toutes en charge le tremblement d'arborescence. Ces API sont introduites via des packages plutôt que injectées directement lors de l'instanciation. Seules les fonctions ou fonctionnalités utilisées sont packagées (empaquetage à la demande), ce qui signifie plus de fonctionnalités et une taille plus petite.

API de composition

Dans Vue2.x, nous utilisons généralement des mixins pour réutiliser le code logique. Bien qu'il soit pratique à utiliser, il y a aussi quelques problèmes : la source de. le code n'est pas clair, les attributs de la méthode peuvent entrer en conflit. Par conséquent, Vue3.x a introduit l'API de composition (API de composition), qui utilise des fonctions pures pour diviser et réutiliser le code. Concept similaire à React Hooks.

• Meilleure réutilisation de la logique et organisation du code
• Meilleure inférence de type

Fragment, téléportation, suspense

Ajout de trois nouveaux composants.

Fragment

Lors de l'écriture de Vue2.x, puisque le composant doit être un nœud racine, certains nœuds dénués de sens sont souvent ajoutés pour l'encapsulation. Le composant Fragment est utilisé pour résoudre ce problème (c'est le même que le composant Fragment dans React).

Téléport

Téléport est en fait le portail de React. Portal fournit une excellente solution pour restituer les nœuds enfants vers les nœuds DOM qui existent en dehors du composant parent.

Un cas d'utilisation typique d'un portail est lorsque le composant parent a un débordement : style caché ou z-index, mais vous avez besoin que le composant enfant "saute" visuellement de son conteneur. Par exemple, les boîtes de dialogue, les cartes flottantes et les boîtes d'invite.

Suspense

Encore une fois, c'est la même chose que Suspense dans React.

Suspense permet à votre composant "d'attendre" avant le rendu, et affiche le contenu de secours en attendant.

Meilleure prise en charge de TypeScript

Vue3.x est réécrit en TypeScript. Les développeurs peuvent pleinement profiter de la commodité que TS apporte au codage lors de l'utilisation de Vue3.x.

API de rendu personnalisé

Cette API définit les règles de rendu du DOM virtuel, ce qui signifie que l'utilisation d'une API personnalisée peut atteindre des objectifs multiplateformes.

Enfin : comment Vue3.0 devient-il plus rapide ?

• Optimisation de l'algorithme différentiel

  • Le DOM virtuel dans Vue2 est entièrement comparé
  • Vue3 ajoute des balises statiques

• Promotion statique hoistStatic

  • Dans Vue2, que l'élément participe ou non à la mise à jour, il sera recréé à chaque fois, puis au rendu
  • Vue3 pour les éléments qui ne participent pas aux mises à jour seront promus statiquement et ne seront créés qu'une seule fois et pourront être réutilisés directement lors du rendu

• cache d'écoute d'événements cacheHandlers

  • Par défaut, onClick sera considéré comme une liaison dynamique, donc ses modifications seront suivies à chaque fois. Cependant, comme il s'agit de la même fonction, il n'y a pas de suivi des modifications. Il peut être mis en cache et réutilisé directement
• rendu SSR
  Lorsqu'il y a une grande quantité de contenu statique, le contenu sera poussé dans un tampon sous forme de chaîne pure, même s'il y a est un contenu dynamique La liaison sera intégrée via une interpolation de modèle, ce qui sera beaucoup plus rapide que le rendu via un dom virtuel
  • Lorsque le contenu statique atteint un certain niveau, la méthode _createStaticVNode sera utilisée sur le client Générer un nœud statique . Ces nœuds statiques seront directement innerHtml, il n'est donc pas nécessaire de créer des objets puis de les restituer en fonction des objets.

Pour plus de connaissances liées à la programmation, veuillez visiter :

Vidéo de programmation ! !

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!