IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Chroniqueur Actualités

    Homme Profil pro
    Rédacteur technique
    Inscrit en
    juin 2016
    Messages
    2 028
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Bénin

    Informations professionnelles :
    Activité : Rédacteur technique
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : juin 2016
    Messages : 2 028
    Points : 45 711
    Points
    45 711
    Par défaut Vue.js 3.2 est disponible avec des améliorations significatives des performances du système de réactivité de V
    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.


    Nom : j.png
Affichages : 21865
Taille : 251,0 Ko

    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
    Contribuez au club : corrections, suggestions, critiques, ... Contactez le service news et Rédigez des actualités

  2. #2
    Membre confirmé
    Homme Profil pro
    retraité
    Inscrit en
    septembre 2014
    Messages
    248
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : retraité

    Informations forums :
    Inscription : septembre 2014
    Messages : 248
    Points : 561
    Points
    561
    Par défaut
    Et donc plein de sites web qui fonctionnaient bien sur les navigateurs actuels vont devenir dysfonctionnels quand ?

  3. #3
    Membre actif
    Homme Profil pro
    OoW
    Inscrit en
    juin 2019
    Messages
    71
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : Ukraine

    Informations professionnelles :
    Activité : OoW

    Informations forums :
    Inscription : juin 2019
    Messages : 71
    Points : 246
    Points
    246
    Par défaut
    \ô/
    Citation Envoyé par TotoParis
    ...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

  4. #4
    Membre expérimenté
    Profil pro
    Inscrit en
    juin 2009
    Messages
    457
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2009
    Messages : 457
    Points : 1 516
    Points
    1 516
    Par défaut
    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.

  5. #5
    Membre confirmé
    Homme Profil pro
    retraité
    Inscrit en
    septembre 2014
    Messages
    248
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : retraité

    Informations forums :
    Inscription : septembre 2014
    Messages : 248
    Points : 561
    Points
    561
    Par défaut
    Citation Envoyé par Dave Hiock Voir le message
    \ô/

    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.

Discussions similaires

  1. Réponses: 1
    Dernier message: 26/10/2020, 10h34
  2. Réponses: 0
    Dernier message: 02/12/2019, 15h31
  3. Réponses: 0
    Dernier message: 04/04/2018, 06h38
  4. ASP.Net 5 bêta 7 est disponible avec des améliorations de DNX
    Par Olivier Famien dans le forum Framework .NET
    Réponses: 0
    Dernier message: 11/09/2015, 05h36

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo