Si está tratando de averiguar cuál de estos dos grandes marcos elegir, lea la opinión del proponente Vue sobre este tema, que he traducido y complementado.Traducido con el soporte de la plataforma en la nube Mail.ru Cloud Solutions .Entonces, eres un desarrollador de React y decidiste probar Vue. ¡Empecemos!React y Vue son Coca-Cola y Pepsi. Gran parte de lo que puede hacer con React también se puede hacer con Vue. Al mismo tiempo, hay varias diferencias, algunas de las cuales reflejan el impacto del marco angular en Vue.Este artículo se centra en las diferencias, por lo que inmediatamente te sumergirás en el mundo de Vue y verás los beneficios.¿En qué se diferencian React y Vue?
React y Vue tienen más similitudes que diferencias:- Estas son dos bibliotecas para crear una interfaz de usuario;
- tanto rápido como ligero;
- tener una arquitectura orientada a componentes;
- utilizar el enfoque de DOM virtual;
- ambos se pueden conectar directamente en el archivo HTML o como un módulo en un sistema de compilación más complejo en Webpack;
- ambos tienen bibliotecas de terceros separadas pero ampliamente utilizadas para el enrutamiento y la gestión del estado.
Las diferencias notables son que Vue generalmente usa archivos de plantilla HTML, y React solo usa archivos JavaScript. La biblioteca Vue también tiene un estado mutable y un sistema de redibujo de plantilla automático llamado reactividad.Componentes
En la biblioteca Vue, los componentes se conectan mediante un método API .componentque toma argumentos de identificación y un objeto con variables de definición. El desarrollador de React probablemente notará los aspectos familiares y desconocidos de la definición de componentes Vue en este código: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);
}
});
Modelo
Como puede ver, el componente tiene una propiedad template, que es una cadena con marcado HTML. La biblioteca Vue incluye un compilador que convierte esta cadena en una función de representación en tiempo de ejecución. Estas funciones de representación utilizan el motor DOM virtual.No puede usar la propiedad templatesi en su lugar decide crear su propia función de representación. Incluso puedes usar el marcado JSX del mundo React. Pero sería extraño cambiar a Vue y hacerlo de esta manera: cómo venir a Italia y rechazar la pizza ...Ganchos de ciclo de vida
Los componentes Vue tienen métodos de ciclo de vida similares a los de los componentes React. Por ejemplo, el enlace createddel ejemplo anterior comienza cuando el estado ( state) del componente está listo , pero antes de que el componente se una a la página. Reaccionar desde el mundo - getDerivedStateFromProps.Pero hay una gran diferencia: en la biblioteca Vue no hay un análogo de la biblioteca React shouldComponentUpdate. Esto no es necesario debido al sistema de reactividad Vue.Redibujo de componentes
Uno de los pasos para inicializar un componente es ver todas sus propiedades y convertirlas en captadores y definidores. Como puede ver, la propiedad messagetomada de los datos originales ( props) recibió dos métodos adicionales, gety set:Vue adjunta estas funciones para permitir el seguimiento de dependencias y las notificaciones de cambio de propiedad cuando un programa lo lee o lo cambia.Estado mutable
Para cambiar el estado en Vue, no necesita llamar a un método separado this.setState, como se hace en React. Simplemente escribe los cambios directamente:
this.setState({ message: 'Hello World' });
this.message = 'Hello World';
Cuando el valor de estado se cambia de esta manera, setse inicia el método de este valor (ver arriba). Setescribe un nuevo valor, pero también tiene otra tarea: notifica a la biblioteca que es este valor el que ha cambiado, y que parte del diseño, que depende del valor de esta variable en el estado, puede necesitar ser redibujado.Si la variable se messagelanza más como propiedad ( prop) en los componentes secundarios, la biblioteca lo recuerda y los componentes secundarios también se redibujarán automáticamente. Es por eso que la biblioteca Vue no necesita un método de ciclo de vida similar al de React shouldComponentUpdate.Plantilla principal
En cuanto al archivo de plantilla principal del proyecto, Vue es más como Angular. Al igual que en React, la plantilla Vue debe montarse en algún lugar de la página:<body>
<div id="root"></div>
</body>
ReactDOM.render('...', document.getElementById('root'));
new Vue({
el: '#root'
});
Sin embargo, a diferencia de React, puede agregar un diseño regular a este elemento raíz. Si React borra todo dentro del elemento al montar el componente #root, entonces Vue guardará:<div id="root">
<div>You can add more markup to index.html</div>
<my-component v-bind:myprop="myval"></my-component>
</div>
También hay una manera de definir plantillas de componentes secundarios en el archivo html raíz a través de extensiones HTML5 como x-template o inline-template. Esto no se considera la mejor práctica, ya que separa la plantilla de la definición de todo el componente en su conjunto.Directivas
Nuevamente, como en Angular, Vue le permite ampliar las capacidades del componente utilizando la lógica de las "directivas". Hay atributos HTML especiales con un prefijo v-, por ejemplo, v-ifpara renderizar con condiciones o v-bindpara adjuntar una expresión a un atributo 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>
El valor asignado a la directiva es una expresión JS, por lo que puede consultar las propiedades de los datos, incluido el uso de operadores ternarios, etc.Organización del proyecto
No hay un equivalente oficial a react-create-app en la biblioteca de Vue, sin embargo, hay una compilación hecha por la comunidad de desarrolladores de Vue: create-vue-app.La recomendación oficial para comenzar un proyecto en Vue es vue-cli. Puede generar todo, desde un proyecto simple con un archivo HTML hasta un proyecto Webpack + Servidor completo:$ vue init template-name project-name
Proyectos con un solo archivo HTML
El creador de Vue.js, Ewan Yu (You Yu Xi), llamó a su proyecto "un marco progresivo" porque puede escalarse para aplicaciones complejas o simplificarse para aplicaciones pequeñas.Por supuesto, React también puede hacer eso. La diferencia es que los proyectos de Vue generalmente usan menos funciones de ES6 y rara vez usan JSX, por lo que no necesitan transponer código usando Babel. Además, toda la biblioteca de Vue cabe en un archivo, no hay archivos separados para los equivalentes de React como ReactDOM.Aquí le mostramos cómo agregar Vue a un proyecto con un solo archivo HTML:<script src="https://unpkg.com/vue/dist/vue.js"></script>
¡Importante! Si no va a usar cadenas de plantillas y, por lo tanto, no necesita un compilador de plantillas, use una versión simplificada de la biblioteca que no tenga estas funciones: vue.runtime.js. Es aproximadamente 20 KB menos que lleno.Componente en un archivo
Si tiene la suerte de agregar la fase de compilación de su proyecto utilizando herramientas como Webpack, puede usar los Componentes de archivo único de Vue (SFC, componentes de Vue en un solo archivo). Estos son archivos con la extensión .vue, encapsulan la plantilla del componente, la configuración de JS y los estilos en un solo archivo:<template>
<div class="my-class">{{ message }}</div>
</template>
<script>
export default {
data() {
message: 'Hello World'
}
}
</script>
<style>
.my-class { font-weight: bold; }
</style>
Esta, sin lugar a dudas, es una de las características más notables de la biblioteca Vue, porque obtienes la plantilla HTML correcta, pero la lógica JS está ahí, justo al lado, y no tienes una curva de separación para la presentación y la lógica.Hay un Webpack-loader llamado vue-loader que se encarga de construir SFC. Durante el proceso de ensamblaje, la plantilla se convierte en una función de representación, y esto es ideal para usar el ensamblado simplificado vue.runtime.js en el navegador.Redux y el resto
Vue tiene una biblioteca de administración de estado basada en Flux llamada Vuex. Esta vez es similar a Redux, pero hay algunas diferencias.¿Qué obtiene el desarrollador al cambiar de React a Vue?
Para comprender completamente el problema, completé el artículo y le dije cuándo es mejor elegir Reaccionar y cuándo Vue.Es probable que cambiar a Vue facilite el ingreso de nuevas personas al proyecto. Las plantillas de Vue se pueden escribir directamente en HTML. Además, para proyectos pequeños, no es necesario conocer las últimas funciones de ES ++ y configurar el ensamblado de código a través de herramientas como Webpack y Babel. El código para Vue se puede escribir en estilo jQuery, es decir, directamente en la plantilla.Vue también tiene un conveniente sistema de entrega de mensajes de estado listo para usar. Los desarrolladores no necesitan molestarse en llamar a un método asincrónico setState( como en React ) o conectar bibliotecas externas para controlar la entrega de estado (como Mobx ).Finalmente, las aplicaciones escritas usando Vue pueden ser notablemente más fáciles: a menudo solo se necesitará la biblioteca en sí o incluso su versión reducida de vue.runtime.js. Si bien el desarrollo moderno en React es casi imposible sin Babel y paquetes voluminosos que pesen hasta varios megabytes.Los proyectos Vue, por otro lado, pueden ser demasiado complejos si tiene una aplicación grande o una lógica compleja en el cliente. Si el diseño se realiza en una plantilla HTML, se vuelve más difícil probar partes de la aplicación. React, que usa solo código JS, proporciona más funciones para reutilizar y extender código. Además, si escribe en React, puede reutilizar su código al escribir aplicaciones para dispositivos que usan React-Native sin mucho gasto. Este no es el caso con Vue.Por lo tanto, la conclusión puede ser la siguiente:Mail.ru Cloud Solutions.