Quels sont les avantages de l’utilisation du framework vue ?

Avantages de l'utilisation de vue : 1. Vue est un développement basé sur des composants, ce qui réduit l'écriture de code et rend le code facile à comprendre ; 2. Il peut lier les données dans deux directions 3. Par rapport à l'utilisation traditionnelle des hyperliens pour basculer et ; sauter les pages Tourner, Vue utilise le routage, pas besoin de rafraîchir la page ; 4. Vue est une application monopage, il n'est pas nécessaire d'obtenir toutes les données et le DOM lors du chargement, ce qui améliore la vitesse de chargement et optimise l'expérience utilisateur ; 5. Vue dispose d'une riche bibliothèque de composants tiers, qui peut être utilisée facilement et améliore l'efficacité du développement.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Qu'est-ce que Vue.js

Vue est un framework JavaScript progressif permettant de créer des 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é, lorsqu'il est combiné avec 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 (SPA).

L'objectif de Vue.js est d'implémenter une liaison de données réactive et des composants de vue composés via l'API la plus simple possible.

Vue.js lui-même n'est pas un framework complet - il se concentre uniquement sur la couche de vue. Il est donc très facile à apprendre et très facile à intégrer à d’autres bibliothèques ou à des projets existants. D'un autre côté, Vue.js peut également alimenter des applications complexes d'une seule page lorsqu'il est utilisé avec des outils associés et des bibliothèques de support.

Avantages de Vue.js

• Petite taille : seulement 33 Ko après compression ;

• Efficacité de fonctionnement plus élevée : basé sur le DOM virtuel, on peut effectuer divers calculs via JavaScript à l'avance et convertir le DOM final. L'opération est une technologie calculée et optimisée. Étant donné que cette opération DOM est une opération de prétraitement et n'exploite pas réellement le DOM, elle est appelée DOM virtuel [Partage de vidéos d'apprentissage : tutoriel vidéo vue, vidéo frontale web]

.

• Liaison de données bidirectionnelle : permet aux développeurs de ne plus exploiter les objets DOM et de consacrer plus d'énergie à la logique métier

• Écologie riche et faible coût d'apprentissage : il existe un grand nombre de produits basés sur vue.js matures et stables ; sur le marché Le framework et les composants de l'interface utilisateur peuvent être utilisés pour réaliser un développement rapide ; il est convivial pour les débutants, facile à démarrer et propose de nombreux supports d'apprentissage

En fait, mis à part quelques déclarations officielles inintelligibles, pour le dire ; simplement, dans le développement Web traditionnel, nous construisons des projets basés sur la structure HTML, puis ajoutons diverses fonctions d'effets spéciaux via jquery ou js. Vous devez sélectionner chaque élément pour les commandes.

Ces contenus peuvent toujours être traités dans des projets simples ou des projets inchangés. Une fois que le projet change ou que le projet devient plus grand, la modification du code sera compliquée et lourde.

Mais maintenant avec vue, ces problèmes n'existent plus. Par exemple, certaines applications créées à partir d'une seule page Web impliquent généralement de nombreuses interactions de données, et l'utilisation de Vue réduira considérablement la charge de travail.

Quels sont les avantages significatifs de vue dans le développement et la production de sites Web ?

1. Liaison de données : Vue définira les données des éléments en fonction des éléments correspondants, effectuera la liaison des données en temps réel via des zones de saisie, obtiendra des données et d'autres méthodes et effectuera le rendu des données des pages Web et des applications.

2. Développement basé sur les composants : grâce à l'encapsulation de modules de vue, il peut diviser divers modules conçus dans un développement Web en composants distincts, puis appeler les composants de modèle correspondants via la liaison de données et transmettre les paramètres, vous pouvez terminer le développement de l'ensemble du projet.

Quels sont les avantages d'utiliser vue ?

• Vue est un développement basé sur des composants, ce qui réduit l'écriture de code et rend le code facile à comprendre.

• L'avantage le plus important est qu'il peut lier des données dans deux directions.

• Par rapport à l'utilisation traditionnelle de liens hypertexte pour changer et sauter de pages, Vue utilise le routage sans actualiser la page.

• Vue est une application monopage. Elle n'a pas besoin d'obtenir toutes les données et le DOM lors du chargement, ce qui améliore la vitesse de chargement et optimise l'expérience utilisateur.

• Vue dispose d'une riche bibliothèque de composants tiers, facile à utiliser et qui améliore l'efficacité du développement.

1. Amélioration des performances réactives

1) Optimisation de la méthode diff

L'algorithme diff est un produit inévitable de la technologie DOM virtuel. Il compare l'ancien et le nouveau DOM, puis met à jour le DOM modifié sur le DOM réel. . En utilisant vue, lors de la création d'un DOM virtuel, une marque statique sera ajoutée en fonction du contenu du DOM. Lorsque les données changent, les nœuds marqués statiques seront comparés, afin que le DOM modifié puisse être rapidement trouvé.

2) Mise en cache de l'écouteur d'événements

Par défaut, onClick sera considéré comme une liaison dynamique, donc ses modifications seront suivies à chaque fois, mais comme il s'agit de la même fonction, il n'est pas nécessaire de suivre les modifications, il suffit de le mettre en cache et de le réutiliser Peut.

3) rendu ssr

Lorsqu'il y a une grande quantité de contenu statique, le contenu sera poussé dans un tampon sous forme de chaîne pure. Même s'il existe une liaison dynamique, il sera introduit via l'interpolation de modèle, ce qui sera beaucoup plus rapide que le rendu DOM virtuel.

2. Réduction de la taille du code

Taille du colis réduite de 41%.

vue a supprimé certaines API peu courantes, telles que le modèle en ligne, le filtre, etc., et utilise le tremblement d'arborescence.

Tree Shaking L'optimisation du Tree Shaking signifie que lorsque nous introduisons un module, nous n'introduisons pas tout le code de ce module, mais seulement le code dont nous avons besoin.

Dans Vue, le tremblement d'arbre est introduit et toutes les API sont introduites via la modularisation ES6. Cela permet aux outils d'empaquetage tels que le webpack ou le rollup d'éliminer automatiquement les API inutilisées lors de l'empaquetage, avec un minimum de modification du volume du bundle.

Le rendu initial est 55 % plus rapide et le rendu de mise à jour est 133 % plus rapide. Les composants sont introduits à la demande, ce qui réduit la taille du package, ce qui permet au projet de se dérouler plus rapidement et plus facilement !

3. La compilation est optimisée

vue Après avoir utilisé la promotion statique, les éléments qui ne participent pas aux mises à jour ne seront créés qu'une seule fois et pourront être réutilisés directement lors du rendu.

Il n'est pas nécessaire de créer un nœud racine unique dans le modèle Fragment, vous pouvez directement placer les balises et le contenu au même niveau. Cela équivaut à un nœud de moins pour le rendu imbriqué.

4. API combinée

vue a ajouté une API combinée, plus propice à la maintenance et à l'encapsulation. Le code d'un module fonctionnel sera rassemblé pour obtenir une cohésion élevée et un faible couplage. Améliorez la lisibilité et la maintenabilité du code, et les API basées sur la composition des fonctions réutilisent mieux le code logique.

5. Meilleure prise en charge de ts

vue a ajouté la fonction définirComponent pour permettre aux composants de mieux utiliser l'inférence de type de paramètre sous ts. Par exemple : reactive et ref sont très représentatifs.

6. Composants plus avancés

• vue ne nécessite pas de nœud racine et plusieurs éléments ou étiquettes peuvent exister côte à côte.

• Vous pouvez ajouter le contenu en téléportation à n'importe quel nœud, ce qui est définitivement une aubaine pour les composants profondément imbriqués.

• Permettre au programme d'attendre que les composants asynchrones restituent du contenu de secours nous permet de créer une expérience utilisateur fluide.

7. Résumé simple :

vue est actuellement l'un des frameworks front-end les plus populaires en Chine. Les performances et la vitesse d'exécution de Vue sont bien meilleures que celles des autres frameworks.

En bref, vue c'est :

• Rendre le projet plus rapide

• Réduire le code

• Plus facile à maintenir

• Développons plus vite et faisons moins d'heures supplémentaires

(Vidéo d'apprentissage partage : développement web front-end, Vidéo de programmation de base)

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!