Discussion :

[Bill Fassinou]

Vue.js 3.2 est disponible avec des améliorations significatives des performances du système de réactivité de Vue.js
et un nouveau composant Web defineCustomElement pour créer des éléments personnalisés natifs

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 - Visualiser dans une fenêtre à part

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>

En plus de "<script setup>", l'équipe a annoncé qu'elle a également un nouveau RFC pour améliorer l'ergonomie de l'utilisation de ref avec le sucre activé par le compilateur.

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 - Visualiser dans une fenêtre à part

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)

Selon l'équipe du framework, cette API permet aux développeurs de créer des bibliothèques de composants d'interface utilisateur alimentées par Vue, qui peuvent être utilisées avec n'importe quel framework, ou sans aucun framework. Elle a également ajouté une nouvelle section dans notre documentation sur la consommation et la création de composants Web dans Vue.

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

[TotoParis]

Et donc plein de sites web qui fonctionnaient bien sur les navigateurs actuels vont devenir dysfonctionnels quand ?

[Dave Hiock]

\ô/

...les navigateurs actuels vont devenir dysfonctionnels quand ?

et pourquoi donc cette remarque, en quoi l'évolution de Vue.js va t-elle mettre en péril les navigateurs

[walfrat]

Personnellement je fait de l'Angular, mais si faire du rendu de grille de données (genre beaucoup de données), j'utilise un composant fait pour ça (AG-grid en l'occurrence).

Parce que faire des grilles de données avec beaucoup de données/colonnes en templating pure, quelque soit la techno, je considère que c'est chercher les ennuis.

[TotoParis]

\ô/

et pourquoi donc cette remarque, en quoi l'évolution de Vue.js va t-elle mettre en péril les navigateurs

C'est simple : j'ai tellement vu de sites web devenirs complètement dysfonctionnels voire franchement vrillés suite à des évolutions de frameworks javascript, et de CSS, que je ne serai pas plus étonné que cela de voir celui-là avoir les mêmes effets. C'est surtout flagrant sur les smartphones.
Tout cela sans rajouter aucune fonctionnalité à ces sites web, censé afficher :
- du texte
- des images
- des incrustations vidéos
- des liens
avec une mise en page correcte.
Et c'est déjà pas mal.
Les tests restent hélas le parent pauvre des équipes de développement de sites web.