Comparaison entre Angular React et Vue
La technologie front-end s'est développée rapidement ces dernières années. Lorsqu'elle est décomposée, elle peut être divisée en quatre aspects :
1 Développement de la technologie linguistique , principalement ES6&7, coffeescript,. typescript, etc. ;
2.Cadre de développement, tel que Angular, React, Vue.js, Angular2, etc.
3.Outils de développement riches et ingénierie frontale ; , comme Grunt, Gulp, Webpack, npm, eslint, mocha et d'autres technologies
4.Extension de la portée du développement front-end, comme nodejs, express, koa, meteor, GraphQL ; côté serveur ; PhoneGap mobile et multiplateforme, ionic, ReactNative, Weex (two.js, etc.) dans le domaine de l'infographie et de la modélisation 3D, etc. dans le domaine de la visualisation et des données ; analyse ; y compris davantage de nouvelles fonctionnalités et interfaces que les navigateurs ouvrent constamment, telles que SVG, Canvas, Bluetooth, batterie, stockage local, Service Worker, Houdini et d'autres nouvelles fonctionnalités d'API, ainsi que des technologies d'optimisation sous-jacentes telles que WASM ; 🎜>En ce qui concerne les frameworks de développement, Angular (1&2), React et Vue occupent actuellement le statut de mainstream et le resteront pendant une période de temps relativement longue, voici donc une comparaison de ces trois technologies pour faciliter sélection technologique ultérieure.
1 Flux de données
Liaison de données
Angular utilise une liaison bidirectionnelle, c'est-à-dire : les opérations d'interface peuvent être reflétées dans les données en temps réel et les modifications des données peuvent être affiché dans l’interface en temps réel.
Principe de mise en œuvre :La vérification des valeurs sales est utilisée dans les variables. Par exemple, ember.js est basé sur le mécanisme d'observation des setters et getters, et la fonction
$scope
$scope.$watch
Lorsque vous utilisez ng-model, vous pouvez utiliser la liaison de données bidirectionnelle.
(vue au modèle) et
(modèle à voir), et $scope.$watch
$scope.$apply
$scope.$digest
lors de l'appel de
$scope.$watch
1 2 3 4 5 |
|
Dans la liaison bidirectionnelle Angularjs, il existe deux concepts très importants appelés dirty check, digest loop, dirty check (dirty détection) est utilisé pour vérifier la portée de la liaison L'état de l'objet dans , par exemple, créez un objet en js et liez l'objet à la portée, afin que l'objet soit dans la boucle digest, et la boucle les découvre en parcourant ces objets. Qu'il change, si tel est le cas, il appellera la méthode de traitement correspondante pour obtenir une liaison bidirectionnelle
Vue prend également en charge la liaison bidirectionnelle, par défaut, la liaison unidirectionnelle , les données sont transmises du composant parent au composant enfant dans une direction. Utilisez la liaison unidirectionnelle dans les grandes applications pour rendre le flux de données facile à comprendre .
Les avantages et les inconvénients de la détection sale
Par rapport au mécanisme d'observation getter/setter d'ember.js et d'autres technologies (excellent) :
getter/setter est détecté à chaque fois. Lorsque le DOM change, cela modifiera la structure de l'arborescence DOM, ce qui aura un grand impact sur les performances. Angular retardera les opérations par lots à une mise à jour et les performances sont relativement bonnes.
Par rapport à Vue (inférieur) :
Vue.js a de meilleures performances et est très, très facile à optimiser car il n'utilise pas de vérification sale. Angulaire, deviendra de plus en plus lent lorsqu'il y aura de plus en plus d'observateurs, car à chaque changement de périmètre, tous les observateurs doivent être recalculés . De plus, le cycle de résumé peut s'exécuter plusieurs fois si certains observateurs déclenchent une autre mise à jour. Les utilisateurs angulaires ont souvent recours à des techniques ésotériques pour résoudre le problème des boucles de contrôle sales. Parfois, il n'existe pas de moyen simple d'optimiser lorsqu'il existe un grand nombre de La portée de l'observateur. Vue.js n'a pas du tout ce problème, car il utilise un système d'observation basé sur le suivi des dépendances et les mises à jour de files d'attente asynchrones. Toutes les modifications de données sont déclenchées indépendamment, sauf s'il existe des dépendances claires entre elles. . La seule optimisation nécessaire est d'utiliser track-by sur v-for.
Flux de données React-One-way
Le flux MVVM dans Angular et Vue utilisent tous deux une syntaxe de type modèle pour décrire la relation de liaison entre l'état de l'interface et les données, puis la convertissent via une conversion interne. La structure est établie. Lorsque l'interface change, les données correspondantes sont mises à jour selon les règles configurées, puis l'état de l'interface est mis à jour à partir des données selon les règles configurées.
React prône la programmation fonctionnelle et le flux de données unidirectionnel : étant donné l'interface (ou les données) d'origine, en appliquant un changement, un autre état (interface ou données) peut être dérivé (renouvelé).
React et Vue peuvent fonctionner avec Redux pour gérer les données d'état.
Rendu à 2 vues
Angular1
Le principe de fonctionnement d'AngularJS est le suivant : le modèle HTML sera analysé dans le DOM par le navigateur et la structure DOM devient l'entrée du compilateur AngularJS. AngularJS parcourra le modèle DOM pour générer les instructions NG correspondantes. Toutes les instructions sont responsables de la définition de la liaison de données pour la vue (c'est-à-dire ng-model en HTML). Par conséquent, le framework NG ne commence à fonctionner qu’après le chargement du DOM.
React
Le rendu de React est construit sur Virtual DOM - une structure de données qui décrit l'état de l'arborescence DOM en mémoire. Lorsque l'état change, React restitue le DOM virtuel et corrige le DOM réel après comparaison et calcul.
Virtual DOM fournit une méthode fonctionnelle pour décrire la vue Il n'utilise pas le mécanisme d'observation des données. Chaque mise à jour restituera l'intégralité de l'application, donc par définition la vue. et Synchronisation des données . Cela ouvre également la possibilité d'applications isomorphes en JavaScript.
En termes de vitesse de rendu du premier écran de quantités extrêmement importantes de données, React présente certains avantages car le mécanisme de rendu de Vue a plus de travail à faire lorsqu'il démarre et React prend en charge le rendu côté serveur.
Le DOM virtuel de React doit également être optimisé . Dans les applications complexes, vous pouvez choisir 1. Ajouter manuellement shouldComponentUpdate pour éviter un nouveau rendu vdom inutile 2. Utilisez pureRenderMixin autant que possible pour les composants, puis utilisez la structure Flux + Immutable.js. En fait, ce n’est pas si simple. En revanche, Vue utilise le suivi des dépendances, et la valeur par défaut est l'état d'optimisation : déclenche autant de mises à jour que les données sont déplacées, ni plus ni moins .
React et Angular 2 ont tous deux des capacités de rendu côté serveur et de rendu natif.
Vue.js n'utilise pas le DOM virtuel mais utilise le vrai DOM comme modèle et les données sont liées à des nœuds réels. L'environnement d'application de Vue.js doit fournir du DOM. Vue.js fonctionne parfois mieux que React** et ne nécessite quasiment aucune optimisation manuelle.
3 Performances et optimisation
En termes de performances, ces frameworks grand public devraient être capables de répondre facilement aux exigences de performances des scénarios les plus courants. La différence réside dans l'optimisabilité et l'impact de l'optimisation sur le. expérience de développement. Pour Vue, le suivi doit être ajouté. React nécessite ShouldComponentUpdate ou Full Immutable, Angular 2 nécessite de spécifier manuellement la stratégie de détection des changements. De la tendance générale, les navigateurs et les téléphones mobiles continueront de changer de plus en plus vite. Les performances de rendu du framework lui-même s'estomperont progressivement dans l'ensemble du système d'optimisation des performances front-end. D'autres points d'optimisation sont encore dans la méthode de construction, cache et images Chargement, liens réseau, HTTP/2. etc. .
Quatre modularisation et composants
Angular1 -> Angular2
Angular1 utilise l'injection de dépendances pour résoudre le problème de dépendance entre les modules Presque tous les modules dépendent du conteneur d'injection Et d'autres fonctions connexes. Il n'est pas chargé de manière asynchrone. Toutes les dépendances requises pour le premier chargement sont répertoriées en fonction des dépendances.
Peut être utilisé avec quelque chose comme Require.js pour réaliser un chargement asynchrone Le chargement paresseux (chargement à la demande) est une solution avec l'aide de ocLazyLoad, mais idéalement, le framework local devrait être plus facile. comprendre.
Angular2 utilise les modules ES6 pour définir les modules et prend également en compte la nécessité d'un chargement dynamique.
Vue
Les instructions et les composants dans Vue sont plus clairement séparés . La directive encapsule uniquement les opérations DOM , tandis que le composant représente une unité indépendante autonome - avec sa propre vue et sa propre logique de données**. Il y a beaucoup de confusion entre les deux dans Angular1.
React
Une application React est construite sur des composants React.
Les composants ont deux concepts fondamentaux : les accessoires et l'état.
Un composant génère la structure HTML correspondant au composant grâce aux valeurs de ces deux attributs dans la méthode render.
Le MVC traditionnel place le modèle à d'autres endroits, tels que des balises de script ou des fichiers de modèle, puis référence le modèle dans JS par certains moyens. Dans le même esprit, pensez au nombre de fois où nous avons été submergés par des fragments de modèles éparpillés un peu partout. Vous ne savez pas quel moteur de modèle, où le modèle est stocké et comment référencer le modèle.
React pense que les composants sont rois et que les composants sont étroitement liés aux modèles. La séparation des modèles de composants et de la logique des composants complique le problème. Il y a donc la syntaxe JSX, qui consiste à embarquer le modèle HTML directement dans le code JS, pour que le modèle et le composant soient associés , mais JS ne supporte pas cette syntaxe contenant du HTML, il doit donc être 🎜>Compiler et générer du JSX dans du code JS via des outils avant de pouvoir l'utiliser (qui peuvent être utilisés comme base pour le développement multiplateforme et sont interprétés dans du code exécuté sur différentes plates-formes via différents interprètes, de sorte que RN et React peut développer des clients de bureau) .
5 Syntaxe et style de codage
React, Vue et Angular2 prennent tous en charge ES6, et Angular2 adopte officiellement le style JavaScript de TypeScript.
React est centré sur JavaScript, tandis qu'Angular 2 reste centré sur HTML. Angular 2 intègre « JS » dans HTML. React intègre « HTML » dans JS. Angular 2 suit l'approche d'Angular 1 consistant à essayer de rendre le HTML plus puissant.
L'approche recommandée pour React est le style JSX + inline, ce qui signifie intégrer HTML et CSS dans JavaScript. L'API par défaut de Vue vise à être simple et facile à utiliser, mais une fois avancé, il est recommandé d'utiliser le format de composant à fichier unique de webpack + vue-loader (le modèle, le script et le style sont écrits dans un fichier vue en tant que composant)
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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Guide de séparation front-end et back-end de React : Comment réaliser un découplage front-end et back-end et un déploiement indépendant, des exemples de code spécifiques sont nécessaires Dans l'environnement de développement Web actuel, la séparation front-end et back-end est devenue une tendance. En séparant le code front-end et back-end, le travail de développement peut être rendu plus flexible, plus efficace et faciliter la collaboration en équipe. Cet article expliquera comment utiliser React pour réaliser une séparation front-end et back-end, atteignant ainsi les objectifs de découplage et de déploiement indépendant. Tout d’abord, nous devons comprendre ce qu’est la séparation front-end et back-end. Dans le modèle de développement Web traditionnel, le front-end et le back-end sont couplés

Comment utiliser React et Flask pour créer des applications Web simples et faciles à utiliser Introduction : Avec le développement d'Internet, les besoins des applications Web deviennent de plus en plus diversifiés et complexes. Afin de répondre aux exigences des utilisateurs en matière de facilité d'utilisation et de performances, il devient de plus en plus important d'utiliser des piles technologiques modernes pour créer des applications réseau. React et Flask sont deux frameworks très populaires pour le développement front-end et back-end, et ils fonctionnent bien ensemble pour créer des applications Web simples et faciles à utiliser. Cet article détaillera comment exploiter React et Flask

Sur le marché actuel des smartphones, les consommateurs sont confrontés à de plus en plus de choix. Avec le développement continu de la technologie, les fabricants de téléphones mobiles ont lancé de plus en plus de modèles et de styles, parmi lesquels Vivox100 et Vivox100Pro sont sans aucun doute deux produits qui ont attiré beaucoup d'attention. Les deux téléphones mobiles proviennent de la célèbre marque Vivox, mais ils présentent certaines différences en termes de fonctions, de performances et de prix. Alors face à ces deux téléphones mobiles, lequel vaut le plus la peine d'être acheté ? Il existe des différences évidentes dans la conception de l'apparence entre Vivox100 et Vivox100Pro.

Actuellement, les pièces potentielles favorisées par le cercle monétaire incluent la pièce SOL et la pièce BCH. SOL est le jeton natif de la plate-forme blockchain Solana. BCH est le jeton du projet BitcoinCash, qui est une monnaie fork de Bitcoin. Parce qu'ils ont des caractéristiques techniques, des scénarios d'application et des orientations de développement différents, il est difficile pour les investisseurs de faire un choix entre les deux. J'aimerais analyser lequel a le plus de potentiel, la monnaie SOL ou le BCH ? Investissez à nouveau. Cependant, la comparaison des devises nécessite une analyse complète basée sur le marché, les perspectives de développement, la solidité du projet, etc. Ensuite, l'éditeur vous le dira en détail. Lequel a le plus de potentiel, la pièce SOL ou le BCH ? En comparaison, la pièce SOL a plus de potentiel. Déterminer laquelle a le plus de potentiel, la pièce SOL ou BCH, est une question compliquée car elle dépend de nombreux facteurs.

Comment créer une application de messagerie fiable avec React et RabbitMQ Introduction : Les applications modernes doivent prendre en charge une messagerie fiable pour obtenir des fonctionnalités telles que les mises à jour en temps réel et la synchronisation des données. React est une bibliothèque JavaScript populaire pour créer des interfaces utilisateur, tandis que RabbitMQ est un middleware de messagerie fiable. Cet article explique comment combiner React et RabbitMQ pour créer une application de messagerie fiable et fournit des exemples de code spécifiques. Présentation de RabbitMQ :

Angular.js est une plateforme JavaScript librement accessible pour créer des applications dynamiques. Il vous permet d'exprimer rapidement et clairement divers aspects de votre application en étendant la syntaxe HTML en tant que langage de modèle. Angular.js fournit une gamme d'outils pour vous aider à écrire, mettre à jour et tester votre code. De plus, il offre de nombreuses fonctionnalités telles que le routage et la gestion des formulaires. Ce guide expliquera comment installer Angular sur Ubuntu24. Tout d’abord, vous devez installer Node.js. Node.js est un environnement d'exécution JavaScript basé sur le moteur ChromeV8 qui vous permet d'exécuter du code JavaScript côté serveur. Être à Ub

Comparaison des performances de Windows 10 et Windows 11 : lequel est le meilleur ? Avec le développement et les progrès continus de la technologie, les systèmes d’exploitation sont constamment mis à jour et mis à niveau. En tant que l'un des plus grands développeurs de systèmes d'exploitation au monde, la série de systèmes d'exploitation Windows de Microsoft a toujours attiré beaucoup d'attention de la part des utilisateurs. En 2021, Microsoft a lancé le système d’exploitation Windows 11, ce qui a suscité de nombreuses discussions et attentions. Alors, quelle est la différence de performances entre Windows 10 et Windows 11 ?

Les box TV, en tant qu'appareil important qui connecte Internet et la télévision, sont devenues de plus en plus populaires ces dernières années. Avec la popularité des téléviseurs intelligents, les consommateurs privilégient de plus en plus les marques de boîtiers TV telles que Tmall, Xiaomi, ZTE et Huawei. Afin d’aider les lecteurs à choisir le boîtier TV qui leur convient le mieux, cet article proposera une comparaison approfondie des caractéristiques et des avantages de ces quatre boîtiers TV. 1. Huawei TV Box : L'expérience audiovisuelle intelligente est excellente et peut offrir une expérience visuelle fluide. Huawei TV Box dispose d'un processeur puissant et d'une qualité d'image haute définition. Tels que la vidéo en ligne et les applications riches intégrées, la musique et les jeux, etc., il prend en charge une variété de formats audio et vidéo. Le boîtier TV Huawei dispose également d'une fonction de commande vocale, ce qui rend l'utilisation plus pratique. Vous pouvez facilement diffuser le contenu de votre téléphone mobile sur l'écran du téléviseur. Sa diffusion en un clic.
