Si vous essayez de déterminer lequel de ces deux grands cadres choisir, lisez l' opinion du promoteur de Vue sur cette question, que j'ai traduite et complétée.Traduit avec le support de la plateforme cloud Mail.ru Cloud Solutions .Vous êtes donc développeur React et avez décidé d'essayer Vue. Commençons!React et Vue sont à la fois Coca-Cola et Pepsi. Une grande partie de ce que vous pouvez faire avec React peut également l'être avec Vue. Dans le même temps, il existe plusieurs différences, dont certaines reflètent l'impact du framework Angular sur Vue.Cet article se concentre sur les différences, vous plongerez donc immédiatement dans le monde de Vue et verrez les avantages.En quoi React et Vue diffèrent-ils?
React et Vue ont plus de similitudes que de différences:- Ce sont deux bibliothèques pour créer une interface utilisateur;
- rapide et léger;
- avoir une architecture orientée composants;
- utiliser l'approche Virtual DOM;
- les deux peuvent être connectés directement dans le fichier HTML ou en tant que module dans un système de construction plus complexe sur Webpack;
- les deux ont des bibliothèques tierces distinctes mais largement utilisées pour le routage et la gestion des états.
Les différences notables sont que Vue utilise généralement des fichiers de modèle HTML et React utilise uniquement des fichiers JavaScript. La bibliothèque Vue a également un état mutable et un système de redessin de modèle automatique appelé réactivité.Composants
Dans la bibliothèque Vue, les composants sont connectés à l'aide d'une méthode API .componentqui prend des arguments id et un objet avec des variables de définition. Le développeur React remarquera probablement les aspects familiers et inconnus de la définition des composants Vue dans ce code:Vue.component('my-component', {
props: [ 'myprop' ],
data() {
return {
firstName: 'John',
lastName: 'Smith'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
},
template: `
<div>
<p>Vue components typically have string templates.
<p>Here's some local state: {{ firstName }}
<p>Here's a computed value: {{ fullName }}
<p>Here's a prop passed down from the parent: {{ myprop }}
</div>
`,
created() {
setTimeout(() => {
this.message = 'Goodbye World'
}, 2000);
}
});
Modèle
Comme vous pouvez le voir, le composant a une propriété template, qui est une chaîne avec un balisage HTML. La bibliothèque Vue inclut un compilateur qui transforme cette chaîne en fonction de rendu lors de l'exécution. Ces fonctions de rendu utilisent le moteur Virtual DOM.Vous ne pouvez pas utiliser la propriété templatesi vous décidez de créer votre propre fonction de rendu. Vous pouvez même utiliser le balisage JSX du monde React. Mais il serait étrange de passer à Vue et de le faire de cette façon - comment venir en Italie et refuser la pizza ...Crochets de cycle de vie
Les composants Vue ont des méthodes de cycle de vie similaires à celles des composants React. Par exemple, le crochet createdde l'exemple ci-dessus démarre lorsque l'état ( state) du composant est prêt , mais avant que le composant ne s'attache à la page. Réagissez du monde - getDerivedStateFromProps.Mais il y a une grande différence: dans la bibliothèque Vue, il n'y a pas d'analogue de la bibliothèque React shouldComponentUpdate. Ce n'est pas nécessaire en raison du système de réactivité Vue.Redessiner les composants
L'une des étapes pour initialiser un composant consiste à afficher toutes ses propriétés et à les transformer en getters et setters. Comme vous pouvez le voir, la propriété messagetirée des données d'origine ( props) a reçu deux méthodes supplémentaires - getet set:Vue attache ces fonctions pour permettre le suivi des dépendances et les notifications de changement de propriété lorsqu'un programme le lit ou le modifie.État mutable
Pour changer d'état dans Vue, vous n'avez pas besoin d'appeler une méthode distincte this.setState, comme cela se fait dans React. Vous écrivez simplement les modifications directement:
this.setState({ message: 'Hello World' });
this.message = 'Hello World';
Lorsque la valeur d'état est modifiée de cette manière, la méthode de setcette valeur est démarrée (voir ci-dessus). Setécrit une nouvelle valeur, mais il a également une autre tâche: il informe la bibliothèque que c'est cette valeur qui a changé, et qu'une partie de la mise en page, qui dépend de la valeur de cette variable dans l'état, peut avoir besoin d'être redessinée.Si la variable est messagelancée en tant que propriété ( prop) dans les composants enfants, la bibliothèque s'en souvient et les composants enfants sont également automatiquement redessinés. C'est pourquoi la bibliothèque Vue n'a pas besoin d'une méthode de cycle de vie similaire à celle de React shouldComponentUpdate.Modèle principal
En ce qui concerne le fichier de modèle de projet principal, Vue ressemble plus à Angular. Comme dans React, le modèle Vue doit être monté quelque part sur la page:<body>
<div id="root"></div>
</body>
ReactDOM.render('...', document.getElementById('root'));
new Vue({
el: '#root'
});
Cependant, contrairement à React, vous pouvez ajouter une disposition régulière à cet élément racine. Si React efface tout à l'intérieur de l'élément lors du montage du composant #root, Vue enregistrera:<div id="root">
<div>You can add more markup to index.html</div>
<my-component v-bind:myprop="myval"></my-component>
</div>
Il existe également un moyen de définir des modèles de composants enfants dans le fichier html racine via des extensions HTML5 telles que x-template ou inline-template. Cela n'est pas considéré comme la meilleure pratique, car il sépare le modèle de la définition de l'ensemble du composant dans son ensemble.Directives
Encore une fois, comme dans Angular, Vue vous permet d'étendre les capacités du composant en utilisant la logique des "directives". Il existe des attributs HTML spéciaux avec un préfixe v-, par exemple, v-ifpour le rendu avec des conditions ou v-bindpour attacher une expression à un attribut HTML normal:new Vue({
el: '#app',
data: {
mybool: true,
myval: 'Hello World'
}
});
<div id="app">
<div v-if="mybool">This renders if mybool is truthy.</div>
<my-component v-bind:myprop="myval"></my-component>
</div>
La valeur affectée à la directive est une expression JS, vous pouvez donc vous référer aux propriétés des données, notamment à l'aide d'opérateurs ternaires, etc.Organisation du projet
Il n'y a pas d'équivalent officiel à react-create-app dans la bibliothèque Vue, mais il y a une construction faite par la communauté des développeurs Vue: create-vue-app.La recommandation officielle pour démarrer un projet sur Vue est vue-cli. Il peut tout générer d'un projet simple avec un fichier HTML à un projet Webpack + Rendu côté serveur entièrement compressé:$ vue init template-name project-name
Projets avec un seul fichier HTML
Le créateur de Vue.js, Ewan Yu (You Yu Xi), a qualifié son projet de «cadre progressif» car il peut être mis à l'échelle pour des applications complexes ou simplifié pour de petites applications.Bien sûr, React peut le faire aussi. La différence est que les projets Vue utilisent généralement moins de fonctionnalités ES6 et utilisent rarement JSX, ils n'ont donc pas besoin de transposer le code à l'aide de Babel. De plus, la bibliothèque Vue entière tient dans un seul fichier, il n'y a pas de fichiers séparés pour les équivalents React tels que ReactDOM.Voici comment ajouter Vue à un projet avec un seul fichier HTML:<script src="https://unpkg.com/vue/dist/vue.js"></script>
Important! Si vous n'utilisez pas de chaînes de modèles et, par conséquent, n'avez pas besoin d'un compilateur de modèles, utilisez une version simplifiée de la bibliothèque qui n'a pas ces fonctions - vue.runtime.js. C'est environ 20 Ko de moins que plein.Composant dans un fichier
Si vous avez la chance d'ajouter la phase de construction de votre projet à l'aide d'outils tels que Webpack, vous pouvez utiliser les composants de fichier unique de Vue (SFC, composants de Vue dans un seul fichier). Ce sont des fichiers avec l'extension .vue, ils encapsulent le modèle de composant, la configuration JS et les styles dans un seul fichier:<template>
<div class="my-class">{{ message }}</div>
</template>
<script>
export default {
data() {
message: 'Hello World'
}
}
</script>
<style>
.my-class { font-weight: bold; }
</style>
C'est, sans aucun doute, l'une des fonctionnalités les plus remarquables de la bibliothèque Vue, car vous obtenez le bon modèle HTML, mais la logique JS est là, juste à côté, et vous n'avez pas de courbe de séparation pour la présentation et la logique.Il existe un Webpack-loader appelé vue-loader qui est responsable de la construction des SFC. Au cours du processus d'assemblage, le modèle est converti en fonction de rendu, ce qui est idéal pour utiliser l'assemblage dépouillé vue.runtime.js dans le navigateur.Redux et le reste
Vue possède une bibliothèque de gestion d'état basée sur Flux appelée Vuex. Cette fois, c'est similaire à Redux, mais il y a quelques différences.Qu'obtient le développeur lors du passage de React à Vue?
Pour bien comprendre le problème, j'ai complété l'article et indiqué quand il vaut mieux choisir React, et quand voir.Passer à Vue est susceptible de faciliter l'entrée de nouvelles personnes dans le projet. Les modèles Vue peuvent être écrits directement en HTML. De plus, pour les petits projets, il n'est pas nécessaire de connaître les dernières fonctionnalités ES ++ et de configurer l'assemblage de code via des outils tels que Webpack et Babel. Le code de Vue peut être écrit en style jQuery, c'est-à-dire directement dans le modèle.Vue dispose également d'un système de livraison de messages d'état prêt à l'emploi. Les développeurs n'ont pas besoin de se soucier d'appeler une méthode asynchrone setState( comme dans React ) ou de connecter des bibliothèques externes pour contrôler la livraison de l'état (comme Mobx ).Enfin, les applications écrites à l'aide de Vue peuvent être sensiblement plus faciles: souvent, seule la bibliothèque elle-même ou même sa version allégée de vue.runtime.js seront nécessaires. Alors que le développement moderne sur React est presque impossible sans Babel et des bundles volumineux pesant jusqu'à plusieurs mégaoctets.Les projets Vue, en revanche, peuvent être trop complexes si vous avez une grande application ou une logique complexe sur le client. Si la mise en page est effectuée dans un modèle HTML, il devient plus difficile de tester des parties de l'application. React, qui utilise uniquement du code JS, offre plus de fonctionnalités pour réutiliser et étendre le code. De plus, si vous écrivez dans React, vous pouvez réutiliser votre code lors de l'écriture d'applications pour les appareils utilisant React-Native sans trop de frais. Ce n'est pas le cas avec Vue.Par conséquent, la conclusion peut être la suivante:Mail.ru Cloud Solutions.