D'une bibliothèque javascript à un framework, le parcours de Vue est impressionnant, surtout si l'on considère qu'il conserve toujours sa nature légère. Vue3 offre plusieurs fonctionnalités, notamment Pinia, qui permet une gestion plus facile de l'état, ainsi qu'une chaîne d'outils de construction qui fonctionne sur Vite. Que vous souhaitiez mettre à jour vos applications vers Vue3 ou simplement expérimenter avec le framework, nous avons compilé ici tout ce que vous devez savoir sur Vue3 !
Qu'est-ce que Vue3 ?
Avant d'aborder les changements que vous verrez dans Vue3, examinons d'abord ce que sont Vue.js et ses composants principaux :
vue
Vue.js est un framework JavaScript frontal open source qui peut être utilisé pour créer des interfaces utilisateur. Le cadre offre une approche de codage déclarative et basée sur les composants qui facilite le développement rapide des affichages des utilisateurs. Il peut être utilisé pour développer des interfaces simples ou compliquées et repose sur les standards HTML, CSS et JavaScript de l'industrie. Les raisons de la popularité de Vue.js et de la large base d'utilisateurs de Vue.js sont sa syntaxe conviviale pour les programmeurs, sa facilité d'utilisation et sa documentation bien définie.
Comme mentionné ci-dessus, Vue.js est construit sur deux caractéristiques principales :
Le rendu déclaratif permet à l'utilisateur de définir une sortie HTML de manière déclarative en fonction de l'état de JavaScript. Vue.js développe le HTML normal à l'aide de la syntaxe du modèle.
Réactivité - Vue.js surveille activement l'état de JavaScript, et lorsqu'il est modifié, il actualise rapidement le DOM.
Vue3.0
Les ingénieurs qui utilisent Vue 2 pour coder doivent maintenant mettre à jour vers Vue3. En effet, il dispose de nouvelles fonctionnalités qui facilitent la conception de composants lisibles et cohérents et de meilleures méthodes pour organiser nos applications. Vue3 est plus convivial, plus court et plus simple à entretenir. Certaines des fonctionnalités notables de Vue3 sont la téléportation, les fragments et plusieurs modèles en V.
La dernière version s'est également débarrassée des filtres et a des variables CSS pilotées par l'état ainsi qu'une fonction de suspense expérimentale. Il a également des modifications de nommage du cycle de vie et des modifications de composant de fichier unique.
Vue3 est-il sorti ?
La dernière version de Vue disponible - Vue3, a été initialement annoncée à la mi-2018 et officiellement publiée en septembre 2020. Vue3.0 a été déclarée comme la version officielle par défaut du framework javascript progressif le 7 février 2022.
Quoi de neuf dans Vue3 ?
Les changements les plus excitants à attendre dans Vue3 sont :
Fournir/injecter
Vue 2 permettait aux utilisateurs de transmettre des données telles que des chaînes, des tableaux, des objets, etc. via des accessoires dans le code. De telles données pourraient être facilement transmises d'un élément parent à ses éléments enfants. Cependant, l'utilisation d'accessoires a rendu plus difficile l'envoi de données de l'élément parent à un élément enfant profondément imbriqué. En conséquence, les développeurs ont dû utiliser Vuex Store et Event Hub. Vue 2.2.0 incluait également fournir/injecter, mais il n'était pas conseillé de l'utiliser dans le code général du programme.
Cependant, en utilisant le combo fournir/injecter amélioré dans Vue3, nous pouvons transmettre les données plus rapidement et plus proprement. Comme son nom l'indique, nous utilisons pour fournir des données accessibles d'un élément parent à l'un de ses composants enfants, quelle que soit la profondeur d'imbrication de ces éléments enfants. Ici, nous pouvons utiliser provide comme objets ou comme fonctions.
Téléportation
En fonction de la logique de l'application que vous souhaitez créer, vos composants peuvent être affichés à des endroits différents de ceux où vous souhaitez les afficher. Par exemple, vous pouvez créer une fenêtre contextuelle destinée à apparaître et à occuper tout l'écran. Pour surmonter cela, nous pouvons utiliser l'attribut de position de ces composants dans CSS, mais avec Vue3, les développeurs peuvent également utiliser Teleport.
Teleport permet aux programmeurs de prendre un élément de son conteneur initial dans lequel il est enveloppé et de le déplacer vers n'importe quel composant déjà existant sur la page où il est utilisé. Par exemple, vous pouvez déplacer un élément d'en-tête de la div #app vers l'en-tête. N'oubliez pas que vous ne pouvez utiliser Teleport que pour déplacer des éléments vers des composants de code qui existent en dehors de Vue DOM.
fragments
Il est difficile d'avoir plusieurs composants racine dans le modèle d'un fichier dans Vue 2. Les programmeurs ont commencé à enfermer tous les composants dans un composant parent comme solution pour le même. Parfois, les programmeurs peuvent avoir besoin de restituer un élément sans qu'un conteneur ne l'entoure. Les ingénieurs peuvent désormais avoir de nombreux éléments dans leur fichier de modèle racine grâce à Fragments, une fonctionnalité ajoutée à Vue3.
API Vue globale
Vous avez peut-être fréquemment trouvé le composant Vue.component ou Vue.use dans le fichier main.js d'une application Vue. Elles sont appelées API globales et il existe de nombreuses méthodes de ce type dans Vue 2. Ici, si vous avez plusieurs instances de votre application, elles sont toutes placées au-dessus de Vue. Il est difficile de limiter une fonctionnalité spécifique à une seule instance d'application.
Vue3 résout ce problème en introduisant une nouvelle API globale appelée createApp. Avec cette méthode, vous pouvez obtenir une nouvelle instance d'une application Vue. Toutes les API liées à Vue 2.x seront transférées vers des instances d'application distinctes. Cela permet à chaque instance de votre application d'avoir des fonctions qui lui sont exclusives sans perturber les autres instances déjà utilisées.
API d'événements
Outre l'utilisation de Vuex Store, l'utilisation d'Event Bus est l'une des méthodes les plus populaires utilisées par les programmeurs pour transmettre des données entre des éléments qui ne partagent pas un contexte parent-enfant. Cependant, des codes tels que $on, $off et $once ont tous été supprimés dans Vue3. Mais $emit est toujours accessible car les éléments enfants doivent émettre des événements vers leurs éléments parents. Une solution à cela serait d'utiliser provide/inject.
Chaîne d'outils de construction alimentée par Vite
Conçu par Evan You, le créateur de Vue, Vite est une chaîne d'outils de support Vue SFC de premier ordre, légère et rapide à créer. Vite est maintenant le moteur derrière la configuration de construction standard de Vue3. Le module bundler @vue-cli/service , qui est construit au-dessus de webpack, enveloppera toute votre application Vue lors du lancement, des rechargements à chaud et de la compilation. Vite, d'autre part, prendra la syntaxe ES Import de votre code de programme et permettra au navigateur d'analyser chaque importation avant d'envoyer une requête HTTP.
Le changement est effectué principalement pour des raisons de rapidité. Le serveur démarre immédiatement car il utilise le support natif du navigateur pour les composants JavaScript et est beaucoup plus rapide.
Syntaxe de l'API de composition
L'API Options a été utilisée pour créer des états et une logique d'élément. L'API de composition a été lancée par Vue3 en remplacement de celle-ci. Il s'agit simplement d'une collection d'API qui nous permet de créer des éléments Vue sans définir d'options en utilisant des méthodes importées.
L'API de composition contient les API suivantes :
API de réactivité - Par exemple, ref() et reactive(). Il peut directement créer un état réactif, un état calculé et des observateurs à l'aide de cela.
Crochets de cycle de vie - Par exemple, onMounted() et onUnmounted(). Nous pouvons nous connecter au cycle de vie de l'élément à l'aide de crochets de cycle de vie.
Injection de dépendance - Par exemple, provide() et inject(). L'utilisation du système d'injection de dépendances de Vue avec les API de réactivité est rendue possible par l'injection de dépendances.
Avantages de l'utilisation des API de composition
Les principaux avantages de l'utilisation des API de composition par rapport à l'API d'options sont :
- Un élément n'est plus nécessaire avec Vue3 pour générer un état réactif.
- Lors de l'ajout de nombreux attributs réactifs, la configuration dans les éléments Vue.js peut devenir gonflée. Il pourrait être utile d'avoir ces variables réactives abstraites dans des fichiers javascript séparés à cause de cela.
- Le principal avantage de l'API Composition est qu'elle permet de réutiliser une logique claire et efficace sous la forme de méthodes Composable. Il résout tous les problèmes liés aux mixins, la principale méthode de réutilisation de la logique dans l'API Options.
- Vous pouvez taper du code dans l'API de composition avec une inférence de type complète.
- Les programmes que vous écrivez dans l'API de composition sont plus efficaces et les noms des variables peuvent être réduits. Cela réduit les frais généraux.
- Vous pouvez mieux partager votre code de programme avec Composition API.
Pinia
Pinia est un outil de gestion d'état léger pour Vue.js. Il nous permet de partager un état entre les éléments et les pages. Il crée un cadre de gestion d'état convivial et entièrement typé en utilisant le nouveau concept de réactivité de Vue3. C'est maintenant la nouvelle bibliothèque de contrôle d'état standard de Vue3.
Pinia a d'abord servi d'étude sur le potentiel de Vuex. Pendant longtemps, Vuex était le système de gestion d'état suggéré pour Vue, mais avec Vue3, Pinia est le système recommandé pour gérer les états dans la documentation officielle. Actuellement, Vuex est en mode maintenance. Bien qu'il continue à fonctionner, aucune nouvelle fonctionnalité ne sera ajoutée. L'utilisation de Pinia est conseillée pour les nouvelles applications.
Pourquoi Pinia ?
Pinia est très léger, atteignant seulement 1 Ko. De plus, il s'intègre aux outils de développement Vue.js pour améliorer votre expérience de codage dans Vue 2 et Vue3. Étant donné que Pinia déduit tous vos types de données, il peut également vous offrir une saisie automatique complète et précise en javascript. Pinia est également de conception modulaire, conviviale et extensible. Dans l'ensemble, Pinia semble être léger, simple et simple. Il ressemble beaucoup à la gestion des éléments et contient tous les outils nécessaires à la programmation dynamique dans Vue3.
Vue 2 sera-t-il obsolète ?
La dernière mise à jour mineure pour Vue 2 était Vue 2.7, qui a été publiée en juillet 2022. Vue 2 est actuellement en mode maintenance. Bien qu'aucune fonctionnalité supplémentaire ne soit livrée, il bénéficiera toujours de correctifs de bogues cruciaux et de correctifs de sécurité pendant 18 mois. D'ici la fin de 2023, Vue 2 sera obsolète.
Migration depuis Vue 2
En fonction de votre logiciel, le passage à Vue3 peut ne pas valoir la peine si vous travaillez sur un projet extrêmement volumineux avec Vue 2. Utilisez Vue3 si des problèmes d'efficacité persistent malgré tous vos efforts d'optimisation.
Que vous souhaitiez ou non migrer votre application vers Vue3 dépend de sa taille et de sa complexité. La majorité de la syntaxe et des techniques dans Vue 2 sont les mêmes que dans Vue3. Cependant, si vous souhaitez utiliser certaines des modifications mentionnées ci-dessus, la migration serait une meilleure idée.
Vue.js dans le projet AppMaster
La plateforme AppMaster utilise le framework VueJS, ou plutôt la troisième version du framework, pour créer une application front-end pour nos utilisateurs. Vue 3 est utilisé pour créer des portails d'administration, de panneaux et de clients, et toute l'interface du studio AppMaster est également réalisée à l'aide du framework VueJS.
Nous utilisons une approche spéciale appelée micro-frontends ou microservices frontaux pour pouvoir développer rapidement et efficacement notre produit ; par exemple, chaque éditeur de modèle de données et éditeur de processus métier est une application frontale complètement distincte dans notre plate-forme. Cela nous permet de développer très rapidement et indépendamment du point de vue de l'équipe de développement, ce qui augmente la vitesse globale de notre produit. Tous ces avantages que nos clients peuvent obtenir en utilisant nos applications.
À l'avenir, en plus du mode d'application monopage SPA, nous ajouterons le mode SSR (rendu côté serveur), qui permettra à nos clients de créer non seulement des panneaux d'administration et des portails personnalisés, mais également des sites Web complets avec très haute optimisation SEO.
À propos du sans code
L'un des éléments clés influençant la démocratisation du codage est l' approche de développement sans code . De nos jours, un plus grand nombre de personnes peuvent accéder à la programmation en général sans codage. Il simplifie la conception Web, le développement d'applications mobiles et le développement Web réactif.
AppMaster fait partie des applications qui peuvent être utilisées pour créer automatiquement du code source. Vous pouvez voir et inspecter le code à tout moment. Avec AppMaster, vous avez la possibilité de personnaliser les informations du projet en langage informatique. Nous permettons également aux utilisateurs d'exporter le code s'ils le souhaitent. C'est une garantie que vous avez un contrôle et une propriété complets sur l'application sur laquelle vous travaillez avec AppMaster.
conclusion
Si vous souhaitez une explication plus détaillée de la différence entre Vue3 et Vue 2, ainsi que des extraits de code, vous pouvez consulter la documentation officielle de Vue.js. Nous avons mentionné la plupart des changements majeurs dont vous devriez être conscient. Il est important que vous restiez au courant des mises à jour de Vue3 si vous souhaitez créer des applications avec ce framework.
