Introduction au framework JavaScript classique et facile à utiliser Vue.js

Cet article vise à présenter un framework JavaScript utile, Vue.js, afin que les lecteurs puissent en avoir une compréhension préliminaire.

Qu'est-ce que Vue

Vue (prononcé /vjuː/, similaire à view) est un framework progressif pour la création d'interfaces utilisateur. Contrairement à d’autres grands frameworks, Vue est conçu pour être appliqué couche par couche de bas en haut. La bibliothèque principale de Vue se concentre uniquement sur la couche de vue, qui est non seulement facile à démarrer, mais également facile à intégrer à des bibliothèques tierces ou à des projets existants. D'un autre côté, combiné à une chaîne d'outils moderne et à diverses bibliothèques de support, Vue est pleinement capable de fournir des pilotes pour des applications complexes d'une seule page.

Caractéristiques de Vue - Propriétés calculées

Écrire des expressions dans des modèles Vue est très pratique, mais si vous y mettez une logique complexe, le modèle sera volumineux et difficile à maintenir. Pour une logique complexe, Vue fournit des propriétés calculées pour la résoudre.

<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})

Ceci est un exemple de base d'une propriété calculée, qui affichera :

Original message: "Hello"
Computed reversed message: "olleH"

Une propriété calculée reverseMessage est déclarée ici, et la fonction que nous fournissons dans calculée sera utilisée comme valeur de la propriété vm.reversedMessage. Et lorsque vm.message change, vm.reversedMessage changera également en conséquence, et s'il existe d'autres propriétés qui y sont liées, elle changera également en conséquence.

Méthodes de Vue et propriétés calculées

En fait, c'est très similaire à la méthode. Nous pouvons utiliser la méthode pour obtenir le même effet, similaire à celui-ci

<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage（） }}"</p>
</div>var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})

Vous pouvez obtenir le même résultat comme celui-ci, mais la différence avec la propriété calculée est que tant que le message ne change pas, la propriété calculée n'exécutera pas la fonction, mais renverra directement le résultat précédent alors que la méthode en a besoin ; pour exécuter la fonction à plusieurs reprises. Utilisez des méthodes lorsque vous n'avez pas besoin de mise en cache.

Vuex, le plug-in principal de Vue

Répondons d'abord à une question : qu'est-ce que Vuex ?

Vuex est un modèle de gestion d'état développé spécifiquement pour les applications Vue.js. Il utilise un stockage centralisé pour gérer l'état de tous les composants de l'application et utilise les règles correspondantes pour garantir que l'état change de manière prévisible. Vuex est également intégré à l'extension devtools de l'outil de débogage officiel de Vue, fournissant des fonctions de débogage avancées telles que le débogage de voyage dans le temps sans configuration, l'importation et l'exportation d'instantanés d'état, etc.

Idées de base de la gestion de l'état Vuex

Extraire l'état partagé du composant et le gérer en mode singleton global. Dans ce mode, notre arborescence de composants forme une immense "vue". Peu importe où il se trouve dans l'arborescence, n'importe quel composant peut obtenir un statut ou déclencher un comportement

De plus, en définissant divers concepts de gestion d'état de manière isolée et en appliquant certaines règles, notre code deviendra plus structuré et plus facile à maintenir.

Cette idée emprunte à Flux, Redux et The Elm Architecture. Contrairement à d'autres modèles, Vuex est une bibliothèque de gestion d'état conçue spécifiquement pour Vue.js afin de tirer parti du mécanisme de réponse de données à granularité fine de Vue.js pour des mises à jour d'état efficaces.

Quand dois-je utiliser Vuex ?

Bien que Vuex puisse nous aider à gérer l'état partagé, il est également livré avec plus de concepts et de frameworks. Cela nécessite de peser les avantages à court et à long terme.

Si vous n'envisagez pas de développer une grande application d'une seule page, l'utilisation de Vuex peut être lourde et redondante. C'est vrai : si votre application est assez simple, il vaut mieux ne pas utiliser Vuex. Un simple bus événementiel global suffit. Cependant, si vous avez besoin de créer une application d'une seule page de taille moyenne à grande, vous réfléchirez probablement à la manière de mieux gérer l'état en dehors du composant, et Vuex deviendra un choix naturel.

Comparaison de Vue et d'autres plug-ins

Prenons React comme exemple de comparaison. Tout d’abord, ils ont tous deux de nombreuses similitudes :

Utiliser le DOM virtuel
Fournit des composants de vue réactifs (Réactifs) et composants (Composable).
Concentrez-vous sur la bibliothèque principale et confiez les autres fonctions telles que le routage et la gestion globale de l'état aux bibliothèques associées.

Performances d'exécution

Dans une application React, lorsque l'état d'un composant change, il restituera l'intégralité du sous-arbre du composant avec le composant comme racine.

Dans les applications Vue, les dépendances des composants sont automatiquement suivies pendant le processus de rendu, afin que le système puisse savoir avec précision quels composants doivent réellement être restitués. Vous pouvez comprendre que chaque composant a automatiquement obtenu ShouldComponentUpdate et qu'il n'y a aucune restriction sur le problème de sous-arborescence mentionné ci-dessus.

Cette fonctionnalité de Vue élimine le besoin pour les développeurs d'envisager de telles optimisations et leur permet de mieux se concentrer sur l'application elle-même.

À propos du programme Web

Dans React, tout est JavaScript. Non seulement le HTML peut être exprimé à l'aide de JSX, mais la tendance actuelle consiste à intégrer de plus en plus de CSS dans JavaScript pour le traitement. Ce type d’approche a ses avantages, mais il existe également des compromis avec lesquels tous les développeurs ne sont pas à l’aise. Dans React, toutes les fonctionnalités de rendu des composants reposent sur JSX. JSX est un outil permettant d'écrire du JavaScript en utilisant la syntaxe XML.

L'idée même de Vue est d'adopter les technologies Web classiques et de les développer. En fait, Vue fournit également des fonctions de rendu et prend même en charge JSX. Cependant, notre recommandation par défaut concerne les modèles. Tout code HTML valide est un modèle Vue valide. Pour de nombreux développeurs habitués au HTML, les modèles sont plus naturels à lire et à écrire que JSX. Bien sûr, il y a ici un élément de préférence subjective, mais si cette différence conduit à une amélioration de l’efficacité du développement, alors elle a une valeur objective.

Échelle

Vue et React fournissent tous deux un routage puissant pour gérer les applications volumineuses. La communauté React est très innovante en matière de gestion d'état (comme Flux, Redux), et ces modèles de gestion d'état et même Redux lui-même peuvent être facilement intégrés dans les applications Vue. En fait, Vue a poussé ce modèle (Vuex) encore plus loin et a intégré plus profondément la solution de gestion d'état de Vue, Vuex, je pense qu'elle peut vous apporter une meilleure expérience de développement.

Une autre différence importante entre les deux est que la bibliothèque de routage et la bibliothèque de gestion d'état de Vue sont officiellement maintenues, prises en charge et mises à jour de manière synchrone avec la bibliothèque principale. React choisit de laisser ces questions à la communauté, créant ainsi un écosystème plus décentralisé. Mais relativement, l'écosystème de React est plus prospère que celui de Vue.

Il existe d'autres différences entre React et Vue, que je n'entrerai pas dans les détails ici, bien sûr, laquelle choisir peut dépendre de l'utilisateur. Ce que nous faisons en ce moment ne sont que quelques suggestions pour plus de commodité. Les utilisateurs comprennent mieux Vue et en quoi il est différent des autres plug-ins.

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!