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

surveille les changements dans une variable. La fonction a trois paramètres : « que observer », « que se passe-t-il en cas de changement » et si vous souhaitez surveiller une variable ou un objet.

$scope.$watchLorsque vous utilisez ng-model, vous pouvez utiliser la liaison de données bidirectionnelle.

Utilisez

(vue au modèle) et
(modèle à voir), et $scope.$watch$scope.$apply$scope.$digest lors de l'appel de

ne lui transmet qu'un seul paramètre, quelle que soit la portée. Si quelque chose change, cette fonction sera appelée. Dans ng-model, cette fonction est utilisée pour vérifier si le modèle et la vue sont synchronisés. Sinon, elle mettra à jour les données du modèle avec la nouvelle valeur.

$scope.$watch

Trois méthodes importantes de liaison bidirectionnelle :

$scope.$apply()

$scope.$digest()

$scope.$watch()

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!