Comparer à d'autres frameworks


Cette page est sans doute la plus difficile à rédiger, mais nous pensons qu'elle est aussi très importante. Peut-être avez-vous rencontré des problèmes et les avez-vous résolus en utilisant d'autres frameworks. Votre but ici est de voir si Vue a une meilleure solution. C’est à cela que nous souhaitons répondre ici.

Objectivement parlant, en tant que membres principaux de l'équipe, nous préférons évidemment Vue et pensons que Vue serait mieux adaptée pour résoudre certains problèmes. Si nous n’avions pas cette croyance, nous ne serions pas occupés à y travailler toute la journée. Mais ici, nous voulons tout décrire de la manière la plus juste et la plus précise possible. D’autres frameworks présentent également des avantages non négligeables, comme le vaste écosystème de React ou la prise en charge du navigateur Knockout couvrant IE6. Nous allons essayer de tous les lister.

Nous espérons également avoir votre aide pour maintenir la documentation à jour, car le monde de JavaScript avance si vite. Si vous remarquez une inexactitude ou quelque chose qui ne semble pas tout à fait correct, veuillez soumettre un problème et faites-le nous savoir.


Table des matières

React

React et Vue ont de nombreuses similitudes, ils tous deux :

  • Utilisez le DOM virtuel

  • pour fournir des composants de vue réactifs (Réactifs) et composants (Composables).

  • Gardez l'accent sur la bibliothèque principale et laissez d'autres fonctions telles que le routage et la gestion globale de l'état aux bibliothèques associées.

En raison des nombreuses similitudes, nous passerons plus de temps à comparer ce domaine. Ici, nous garantissons non seulement l’exactitude du contenu technique, mais prenons également en compte des considérations équilibrées. Nous devons reconnaître les éléments qui rendent React meilleur que Vue, comme l'écosystème plus riche.

Certains des chapitres suivants peuvent être légèrement obsolètes en raison de la sortie récente de React 16+. Nous prévoyons de réécrire cette partie du contenu avec la communauté React dans un avenir proche.


Performances d'exécution

React et Vue sont tous deux très rapides, la vitesse n'est donc pas un facteur décisif dans le choix entre eux. Pour des performances de données spécifiques, vous pouvez passer à ce benchmark tiers, qui se concentre sur les performances réelles de rendu/mise à jour d'une arborescence de composants très simple.

Optimisation

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.

Pour éviter un nouveau rendu inutile des composants enfants, vous devez utiliser PureComponent autant que possible, ou implémenter manuellement la méthode shouldComponentUpdate. Dans le même temps, vous devrez peut-être utiliser des structures de données immuables pour faciliter l'optimisation de vos composants. PureComponent，或是手动实现 shouldComponentUpdate 方法。同时你可能会需要使用不可变的数据结构来使得你的组件更容易被优化。

然而，使用 PureComponent 和 shouldComponentUpdate 时，需要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。如果不符合这个情况，那么此类优化就会导致难以察觉的渲染结果不一致。这使得 React 中的组件优化伴随着相当的心智负担。

在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染。你可以理解为每一个组件都已经自动获得了 shouldComponentUpdate

Cependant, lorsque vous utilisez PureComponent et shouldComponentUpdate, vous devez vous assurer que la sortie de rendu de l'ensemble du sous-arbre du composant est déterminée par les accessoires du composant. Si ce n’est pas le cas, de telles optimisations peuvent conduire à des incohérences de rendu imperceptibles. Cela fait que l'optimisation des composants dans React s'accompagne d'une charge mentale considérable.

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 quel composant doit réellement être restitué. Vous pouvez comprendre que chaque composant a automatiquement obtenu shouldComponentUpdate et qu'il n'y a aucune restriction sur le problème de sous-arbre mentionné ci-dessus.


Cette fonctionnalité de Vue permet aux développeurs de n'avoir plus besoin d'envisager de telles optimisations et de mieux se concentrer sur l'application elle-même.

HTML & CSS

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. 🎜🎜L'idée même de Vue est d'adopter les technologies Web classiques et de les développer. Nous l’analyserons en détail ci-dessous. 🎜

JSX vs Templates

Dans React, tous les composants s'appuient sur JSX pour leurs fonctions de rendu. JSX est un sucre syntaxique pour écrire du JavaScript en utilisant la syntaxe XML.

L'utilisation de la fonction de rendu de JSX présente les avantages suivants :

  • Vous pouvez utiliser toutes les capacités JavaScript du langage de programmation pour créer vos pages d'affichage. Par exemple, vous pouvez utiliser des variables temporaires, le contrôle de flux fourni avec JS et référencer directement la valeur dans la portée JS actuelle, etc.

  • La prise en charge de JSX par l'outil de développement est relativement avancée par rapport aux autres modèles Vue actuellement disponibles (par exemple, le peluchage, la vérification de type, la complétion automatique de l'éditeur).

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 HTML conforme à la spécification est un modèle Vue légal, ce qui apporte également des avantages uniques :

  • 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.

  • Les modèles basés sur HTML facilitent la migration progressive des applications existantes vers Vue.

  • Cela permet également aux concepteurs et aux nouveaux développeurs de comprendre et de participer plus facilement au projet.

  • Vous pouvez même utiliser d'autres préprocesseurs de modèles, tels que Pug, pour écrire des modèles Vue.

Certains développeurs pensent que les modèles signifient que vous devez apprendre un DSL (Domain-Specific Language) supplémentaire pour développer - nous pensons que cette distinction est superficielle. Tout d'abord, l'apprentissage de JSX n'est pas gratuit - il s'agit d'un ensemble de syntaxe supplémentaire en plus de JS. Dans le même temps, tout comme il est facile pour les personnes familiarisées avec JS d'apprendre JSX, il est également facile pour les personnes familiarisées avec HTML d'apprendre la syntaxe des modèles de Vue. Enfin, l'existence du DSL nous permet de permettre aux développeurs de faire plus de choses avec moins de code, comme les différents modificateurs de v-on. L'implémentation des fonctions correspondantes dans JSX nécessitera beaucoup plus de code.

En regardant de manière plus abstraite, nous pouvons diviser les composants en deux catégories : l'une est présentationnelle et l'autre est logique. Nous vous recommandons d'utiliser des modèles pour le premier et JSX ou des fonctions de rendu pour le second. La proportion de ces deux types de composants varie en fonction du type d'application, mais globalement, nous constatons qu'il y a beaucoup plus de composants de présentation que de composants logiques.

CSS dans la portée du composant

Sauf si vous répartissez les composants sur plusieurs fichiers (tels que Modules CSS), la portée CSS dans React est implémentée via des solutions CSS-in-JS (telles que styled-components, glamorous et emotion ). Cela introduit un nouveau paradigme de style orienté composants qui est différent du processus d'écriture CSS normal. De plus, bien qu'il soit pris en charge pour extraire le CSS dans une feuille de style distincte au moment de la construction, le bundle nécessite généralement un programme d'exécution pour que ces styles prennent effet. Bien que vous puissiez utiliser JavaScript pour gérer les styles de manière flexible, vous devez également faire un compromis entre la taille du bundle et la surcharge d'exécution.

Si vous êtes un fan de CSS-in-JS, de nombreuses bibliothèques CSS-in-JS grand public prennent également en charge Vue (telles que styled-components-vue et vue-emotion). La principale différence entre React et Vue ici est que la méthode par défaut de Vue pour définir les styles est une balise similaire à style dans Single File Component. style 的标签。

单文件组件让你可以在同一个文件里完全控制 CSS，将其作为组件代码的一部分。

<style scoped>
  @media (min-width: 250px) {
    .list-container:hover {
      background: orange;
    }
  }
</style>

这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域，编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover。

最后，Vue 的单文件组件里的样式设置是非常灵活的。通过 vue-loader，你可以使用任意预处理器、后处理器，甚至深度集成 CSS Modules——全部都在 <style>

Single File Components
vous donne un contrôle total sur CSS dans le même fichier dans le cadre du code du composant.

rrreee

Cet attribut facultatif scoped ajoutera automatiquement un attribut unique (tel que data-v-21e5b78) pour spécifier la portée du CSS dans le composant. code >.list-container:hover sera compilé en quelque chose comme .list-container[data-v-21e5b78]:hover. Enfin, le paramètre de style dans le composant monofichier de Vue est très flexible. Grâce à vue-loader, vous pouvez utiliser n'importe quel préprocesseur, postprocesseur et même intégrer en profondeur Modules CSS - le tout dans la balise <style>.

Scale

🎜Scale up🎜🎜🎜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 plus loin (🎜Vuex🎜) et a intégré plus profondément la solution de gestion d'état de Vue, Vuex, qui, je pense, 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.

Enfin, Vue fournit un échafaudage CLI, qui vous permet de construire des projets très facilement grâce à des conseils d'échafaudage interactifs. Vous pouvez même l'utiliser pour prototypage rapide de composants. React fournit également create-react-app à cet égard, mais il existe encore certaines limitations :

  • Il n'autorise aucune configuration lorsque le projet est généré, et Vue CLI s'exécute sur des dépendances d'exécution évolutives, le runtime peut être étendu via plugins.

  • Il fournit uniquement une option par défaut pour créer une application d'une seule page, tandis que Vue fournit des modèles à diverses fins.

  • Il ne peut pas créer de projets avec des configurations prédéfinies créées par l'utilisateur, ce qui est particulièrement utile pour les conventions préétablies dans les environnements d'entreprise.

Bien qu'il soit important de noter que ces limitations sont intentionnelles, cela a ses avantages. Par exemple, si les exigences de votre projet sont très simples, vous n'avez pas besoin de personnaliser le processus de génération. Vous pouvez le mettre à jour en tant que dépendance. Si vous en savez plus sur les Différentes idées de conception.

Réduction d'échelle

React a une courbe d'apprentissage abrupte Avant de commencer à apprendre React, vous devez connaître JSX et ES2015 car de nombreux exemples utilisent ces syntaxes. Vous devrez apprendre le système de construction, et bien que vous puissiez techniquement utiliser Babel pour compiler votre code à la volée, cela n'est pas recommandé pour une utilisation en production.

Tout comme Vue évolue comme React, Vue diminue comme jQuery. Il vous suffit de mettre les balises suivantes sur la page pour exécuter :

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Ensuite, vous pouvez écrire du code Vue et l'appliquer en production. Il vous suffit de le remplacer par la version min du fichier Vue et ce n'est pas nécessaire. devez vous soucier d'autres problèmes de performances.

Comme il n'est pas nécessaire d'apprendre JSX, ES2015 et de créer des systèmes au début, les développeurs peuvent créer des applications simples en moins d'une journée en lisant le Guide.


Rendu natif

React Native vous permet d'écrire des applications (iOS et Android) avec des capacités de rendu natives en utilisant le même modèle de composant. Pouvoir développer sur plusieurs plates-formes en même temps est idéal pour les développeurs. En conséquence, Vue et Weex auront une coopération officielle. Weex est un cadre de développement d'interface utilisateur multiplateforme initié par Alibaba. Il incube également des projets au sein de la Fondation Apache. Weex vous permet d'utiliser le développement de la syntaxe Vue pour non seulement s'exécuter. côté navigateur, et peut également être utilisé pour développer des composants pour des applications natives sur iOS et Android.

À l'heure actuelle, Weex est toujours en développement actif et sa maturité ne peut rivaliser avec React Native. Cependant, le développement de Weex est motivé par les besoins des plus grandes entreprises de commerce électronique du monde, et l'équipe Vue coopérera également activement avec l'équipe Weex pour garantir une bonne expérience de développement aux développeurs.

Une autre option est NativeScript-Vue, un plugin NativeScript permettant de créer des applications entièrement natives avec Vue.js.


MobX

Mobx est très populaire dans la communauté React et utilise en fait presque le même système réactif dans Vue. Dans une certaine mesure, React + Mobx peut également être considéré comme une version plus lourde de Vue, donc si vous avez l'habitude de les utiliser en combinaison, il est plus logique de choisir Vue.


Preact et autres bibliothèques de type React

Les bibliothèques de type React ont tendance à partager autant que possible les API et l'écologie avec React. La comparaison ci-dessus s’applique donc également à eux. La différence entre eux et React réside souvent dans la plus petite écologie. Étant donné que ces bibliothèques ne sont pas compatibles à 100 % avec tout ce qui se trouve dans l'écosystème React, certains outils et bibliothèques auxiliaires peuvent ne pas être disponibles. Ou même si cela semble fonctionner, une incompatibilité peut survenir à tout moment, à moins que la bibliothèque de type React que vous utilisez ne soit officiellement strictement cohérente avec React.


AngularJS (Angular 1)

Certaines syntaxes de Vue sont très similaires à celles d'AngularJS (par exemple v-if vs ng-if). Parce qu'AngularJS a été l'inspiration pour les premiers développements de Vue. Cependant, de nombreux problèmes existant dans AngularJS ont été résolus dans Vue.


Complexity

Vue.js est beaucoup plus simple qu'AngularJS en termes d'API et de conception, vous pouvez donc rapidement maîtriser toutes ses fonctionnalités et vous lancer dans le développement.


Flexibilité et modularité

Vue.js est une solution plus flexible et ouverte. Il vous permet d'organiser votre application comme vous le souhaitez, plutôt que de devoir suivre à tout moment les règles définies par AngularJS, ce qui rend Vue adaptée à une variété de projets. Nous savons qu'il est important de vous laisser la décision.

C'est pourquoi nous proposons un système complet de développement rapide basé sur Vue.js. Vue CLI vise à devenir l'outil fondamental standard de l'écosystème Vue. Il permet à divers outils de construction de fonctionner ensemble de manière transparente avec des configurations par défaut bien établies. De cette façon, vous pouvez vous concentrer sur l’application elle-même sans passer trop de temps sur la configuration. Dans le même temps, il offre également la flexibilité d’ajuster chaque configuration d’outil en fonction des besoins réels.


Data Binding

AngularJS utilise une liaison bidirectionnelle, tandis que Vue force un flux de données unidirectionnel entre différents composants. Cela rend le flux de données dans l'application plus clair et plus facile à comprendre.


Directives et composants

Les instructions et les composants sont plus clairement séparés dans Vue. Les directives n'encapsulent que les opérations DOM, tandis que les composants représentent une unité indépendante autonome - avec sa propre vue et sa propre logique de données. Dans AngularJS, tout est fait par des directives et les composants ne sont qu'un type spécial de directive.


Performances d'exécution

Vue a de meilleures performances et est très, très facile à optimiser car elle n'utilise pas de vérification sale.

Dans AngularJS, lorsqu'il y a de plus en plus d'observateurs, cela deviendra de plus en plus lent, car à chaque changement de portée, tous les observateurs doivent être recalculés. De plus, si certains observateurs déclenchent une autre mise à jour, le cycle de résumé devra peut-être s'exécuter plusieurs fois. Les utilisateurs d'AngularJS ont souvent recours à des techniques ésotériques pour résoudre le problème des boucles de vérification sales. Parfois, il n’existe pas de moyen simple d’optimiser une portée avec un grand nombre d’observateurs.

Vue 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 une dépendance claire entre elles.

Fait intéressant, Angular et Vue utilisent des conceptions similaires pour résoudre certains problèmes existant dans AngularJS.


Angular (original Angular 2)

Nous discuterons du nouvel Angular séparément car il s'agit d'un framework complètement différent d'AngularJS. Par exemple : il dispose d'un excellent système de composants, de nombreuses implémentations ont été complètement réécrites et l'API a été complètement modifiée.


TypeScript

Angular doit en fait être développé en TypeScript, car la quasi-totalité de sa documentation et de ses ressources d'apprentissage sont orientées TS. TS présente de nombreux avantages : la vérification de type statique est très utile dans les applications à grande échelle et améliore également considérablement l'efficacité du développement pour les développeurs ayant une expérience Java et C#.

Cependant, tout le monde ne souhaite pas utiliser TS - dans les projets de petite et moyenne taille, l'introduction de TS peut ne pas apporter beaucoup d'avantages évidents. Dans ces cas, utiliser Vue serait un meilleur choix car utiliser Angular sans TS serait un défi.

Enfin, même si l'intégration de Vue et TS n'est peut-être pas aussi profonde qu'Angular, nous fournissons également des Déclarations de types et des Décorateurs de composants officiels et savons qu'il existe un grand nombre d'utilisateurs qui utilisent la combinaison Vue + TS en production. environnements. Nous coopérons également activement avec l'équipe TS/VSCode de Microsoft, dans le but de fournir aux utilisateurs de Vue + TS une meilleure expérience de vérification de type et de développement IDE.


Performances d'exécution

Les deux frameworks sont rapides et ont des données de référence très similaires. Vous pouvez parcourir des données spécifiques pour effectuer une comparaison plus fine, mais la vitesse ne devrait pas être le facteur décisif.


Taille

En termes de taille, la version récente d'Angular utilise les technologies AOT et tree-shaking pour réduire considérablement la taille du code final. Mais même ainsi, un projet Vue contenant Vuex + Vue Router (30 Ko après gzip) est toujours beaucoup plus petit que la taille du projet par défaut (~ 65 Ko) généré à l'aide de ces optimisations angular-cli.


Flexibilité

Vue est plus flexible qu'Angular. Vue fournit officiellement des outils de construction pour vous aider à créer des projets, mais cela ne limite pas la façon dont vous organisez votre code d'application. Certaines personnes aimeraient peut-être avoir des normes strictes d’organisation du code, mais il existe également des développeurs qui apprécient une approche plus flexible et plus libre.


Learning Curve

Pour apprendre Vue, vous n'avez besoin que d'une bonne base en HTML et JavaScript. Avec ces compétences de base, vous pouvez vous lancer très rapidement dans le développement en lisant les Guidelines.

La courbe d'apprentissage d'Angular est très raide - en tant que framework, sa zone API est beaucoup plus grande que celle de Vue, vous devez donc comprendre plus de concepts pour commencer à travailler efficacement. Bien sûr, la complexité d'Angular elle-même est due à son objectif de conception consistant à cibler uniquement des applications volumineuses et complexes, mais il est indéniable que cela le rend également peu convivial pour les développeurs moins expérimentés.


Ember

Ember est un framework polyvalent. Il fournit un grand nombre de conventions, et une fois que vous les connaîtrez, le développement deviendra très efficace. Cependant, cela signifie également que la courbe d’apprentissage est longue et peu flexible. Cela signifie faire des compromis entre les frameworks et les bibliothèques (plus un ensemble d'outils faiblement couplés). Cette dernière est plus libératrice, mais nécessite également de prendre davantage de décisions architecturales.

Cela dit, notre meilleure comparaison est entre le noyau Vue et les templates d'Ember et la couche data model :

  • Vue construit des réponses sur des objets JavaScript simples, fournissant des propriétés calculées automatiquement. Dans Ember, vous devez tout mettre dans un objet Ember et déclarer manuellement les dépendances pour les propriétés calculées. La syntaxe du modèle de

  • Vue peut utiliser des expressions JavaScript complètes, tandis que la syntaxe de Handles est très limitée par rapport aux fonctions d'assistance.

  • En termes de performances, Vue est bien meilleure qu'Ember, même avec le dernier moteur Glimmer d'Ember 3.x. Vue peut mettre à jour automatiquement les lots, tandis qu'Ember nécessite une gestion manuelle dans les scénarios sensibles aux performances.


Knockout

Knockout est un pionnier dans le domaine du MVVM et du suivi des dépendances. Son système réactif est également très similaire à Vue. Ses performances en matière de prise en charge du navigateur et d'autres aspects sont également impressionnantes. Il peut prendre en charge au moins IE6, tandis que Vue ne peut prendre en charge qu'au moins IE9.

Knockout a un peu ralenti avec le temps et commence à paraître un peu obsolète. Par exemple, son système de composants ne dispose pas de méthodes complètes d’événements du cycle de vie, bien que celles-ci soient très courantes de nos jours. Et comparé à Vue, sa méthode d'appel de l'interface du sous-composant est un peu lourde.

Si la recherche vous intéresse, vous constaterez également que les deux ont des concepts différents en matière de conception d'interface. Cela peut se refléter dans la simple Todo List créée par chacun. Cela peut être un peu subjectif, mais beaucoup de gens pensent que l’interface API de Vue est plus simple et plus élégante dans sa structure.


Polymer

Polymer est un autre projet sponsorisé par Google et a en fait été une source d'inspiration pour Vue. Les composants de Vue peuvent être grossièrement comparés aux éléments personnalisés de Polymer, et les deux ont des styles de développement similaires. La plus grande différence est que Polymer est basé sur la dernière version de la norme Web Components et nécessite des polyfills lourds pour fonctionner (avec une dégradation des performances), et le navigateur lui-même ne prend pas en charge ces fonctionnalités. En comparaison, Vue n'a pas besoin de s'appuyer sur des polyfills pour fonctionner lorsqu'il prend en charge IE9.

Dans la version Polymère, afin de compenser les performances, l'équipe utilise le système de liaison de données de manière très limitée. Par exemple, les seules expressions prises en charge dans Polymer sont la négation booléenne et un seul appel de méthode, et l'implémentation de sa méthode calculée n'est pas très flexible.


Riot

Riot 3.0 fournit un modèle de développement similaire basé sur des composants (appelé Tag dans Riot), qui fournit une petite et belle API. Riot et Vue peuvent présenter de nombreuses similitudes dans leurs philosophies de conception. Bien que Vue soit un peu plus lourd que Riot, Vue présente néanmoins de nombreux avantages significatifs :

  • Meilleures performances. Riot utilise Parcourir l'arborescence DOM au lieu du DOM virtuel, mais il utilise en fait un mécanisme de vérification sale, il souffre donc des mêmes problèmes de performances qu'AngularJS.

  • Prise en charge d'outils plus matures. Vue fournit un support officiel pour webpack et Browserify, tandis que Riot s'appuie sur la communauté pour créer des systèmes intégrés.