Environ deux mois après la publication de la première version mineure de Vue.js 3, l'équipe du framework vient de publier Vue.js 3.2 avec de nouvelles fonctionnalités, quelques améliorations des performances et sans aucun changement de rupture. Vue.js 3.2 introduit de nouveaux composants Web et une nouvelle méthode defineCustomElement pour créer facilement des éléments personnalisés natifs en utilisant les API des composants de Vue. Voici les points forts de cette nouvelle version.Nouvelles fonctionnalités SFC
Deux nouvelles fonctionnalités pour les composants à fichier unique (SFC, alias fichiers .vue) ont quitté le statut expérimental et sont désormais considérées comme stables :
- "<script setup>" est un sucre syntaxique de compilation qui améliore considérablement l'ergonomie lors de l'utilisation de l'API de composition à l'intérieur des SFC ;
- "<style> v-bind" permet de définir des valeurs CSS dynamiques basées sur l'état du composant dans les balises <style> des SFC ;
Voici un exemple de composant utilisant ces deux nouvelles fonctionnalités ensemble :
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script setup>
import { ref } from 'vue'
const color = ref('red')
</script>
<template>
<button @click="color = color === 'red' ? 'green' : 'red'">
Color is: {{ color }}
</button>
</template>
<style scoped>
button {
color: v-bind(color);
}
</style> |
Composants Web
Vue 3.2 introduit une nouvelle méthode defineCustomElement pour créer facilement des éléments personnalisés natifs à l'aide des API des composants Vue :
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 |
import { defineCustomElement } from 'vue'
const MyVueElement = defineCustomElement({
// normal Vue component options here
})
// Register the custom element.
// After registration, all `<my-vue-element>` tags
// on the page will be upgraded.
customElements.define('my-vue-element', MyVueElement) |
Améliorations des performances
La version 3.2 comprend des améliorations significatives des performances du système de réactivité de Vue. Plus précisément :
- l'implémentation de ref est plus efficace (environ 260 % plus rapide en lecture et 50 % plus rapide en écriture) ;
- le suivi des dépendances est environ 40 % plus rapide ;
- Vue.js 3.2 utilise moins mémoire (environ 17 % en moins).
Le compilateur de modèles a également reçu un certain nombre d'améliorations :
- la création d'éléments VNode simples est désormais environ 200 % plus rapide ;
- augmentation plus agressive des constantes.
Enfin, une nouvelle directive "v-memo" permet de mémoriser une partie de l'arbre des modèles. Un appel v-memo permet à Vue de sauter non seulement le diffing du DOM virtuel, mais aussi la création de nouveaux VNode. Bien qu'il soit rarement nécessaire, il fournit une échappatoire pour tirer le maximum de performance dans certains scénarios, par exemple les grandes listes v-for. Selon l'équipe, l'utilisation de v-memo, qui est un ajout d'une seule ligne, place Vue parmi les frameworks grand public les plus rapides dans js-framework-benchmark :
Rendu côté serveur
Selon l'équipe, le paquet @vue/server-renderer de la version 3.2 est maintenant livré avec une construction de module ES qui est également découplée des modules intégrés de Node.js. Cela permet de regrouper et d'exploiter @vue/server-renderer pour l'utiliser dans des moteurs d'exécution non Node.js tels que CloudFlare Workers ou Service Workers. L'équipe dit également avoir amélioré les API de rendu en continu, avec de nouvelles méthodes de rendu vers l'API Web Streams.
L'API Effect Scope
La version 3.2 introduit Effect Scope, une nouvelle API permettant de contrôler directement le calendrier d'élimination des effets réactifs (calculés et observateurs). Elle facilite l'exploitation de l'API de réactivité de Vue en dehors du contexte d'un composant, et permet également de débloquer certains cas d'utilisation avancés à l'intérieur des composants. Selon l'équipe, il s'agit d'une API de bas niveau destinée en grande partie aux auteurs de bibliothèques. Il est donc recommandé de lire la RFC de la fonctionnalité pour connaître la motivation et les cas d'utilisation de cette fonctionnalité.
Source : Vue.js 3.2
Et vous ?
Que pensez-vous des changements et nouveautés introduits par Vue.js 3.1 ?Voir aussi
La version 3 de Vue.js, le framework JavaScript progressif, est disponible avec de nouvelles API et des améliorations de performance Vue.js 3 abandonne finalement son plan visant à prendre en charge Internet Explorer 11, les développeurs qui supportent le navigateur devront rester sur Vue.js 2.7 Svelte NodeGUI, une alternative à Electron, plus légère selon ses développeurs, avec une interface utilisateur native. Pourrait-il vraiment concurrencer Electron ? La version 3 de Svelte, un framework JavaScript de composants graphiques, supporte officiellement le langage de programmation TypeScript, depuis juillet 2020 
Envoyé par TotoParis
