VueJS - Descripción general
VueJSes un marco JavaScript progresivo de código abierto que se utiliza para desarrollar interfaces web interactivas. Es uno de los marcos famosos que se utilizan para simplificar el desarrollo web. VueJS se centra en la capa de vista. Se puede integrar fácilmente en grandes proyectos para el desarrollo front-end sin ningún problema.
La instalación de VueJS es muy fácil de comenzar. Cualquier desarrollador puede comprender y crear interfaces web interactivas fácilmente en cuestión de tiempo. VueJS es creado por Evan You, un ex empleado de Google. La primera versión de VueJS se lanzó en febrero de 2014. Recientemente ha alcanzado las 64,828 estrellas en GitHub, lo que la hace muy popular.
Caracteristicas
Las siguientes son las funciones disponibles con VueJS.
DOM virtual
VueJS utiliza DOM virtual, que también es utilizado por otros frameworks como React, Ember, etc. Los cambios no se realizan en el DOM, sino que se crea una réplica del DOM que está presente en forma de estructuras de datos JavaScript . Siempre que se deben realizar cambios, se realizan en las estructuras de datos de JavaScript y esta última se compara con la estructura de datos original. Los cambios finales se actualizan al DOM real, que el usuario verá cambiar. Esto es bueno en términos de optimización, es menos costoso y los cambios se pueden realizar a un ritmo más rápido.
El enlace de datos
La función de enlace de datos ayuda a manipular o asignar valores a atributos HTML, cambiar el estilo, asignar clases con la ayuda de la directiva de enlace llamada v-bind disponible con VueJS.
Componentes
Los componentes son una de las características importantes de VueJS que ayuda a crear elementos personalizados, que se pueden reutilizar en HTML.
Manejo de eventos
v-on es el atributo agregado a los elementos DOM para escuchar los eventos en VueJS.
Animación / Transición
VueJS proporciona varias formas de aplicar la transición a elementos HTML cuando se agregan / actualizan o eliminan del DOM. VueJS tiene un componente de transición incorporado que debe envolverse alrededor del elemento para lograr un efecto de transición. Podemos agregar fácilmente bibliotecas de animación de terceros y también agregar más interactividad a la interfaz.
Propiedades calculadas
Esta es una de las características importantes de VueJS. Ayuda a escuchar los cambios realizados en los elementos de la interfaz de usuario y realiza los cálculos necesarios. No hay necesidad de codificación adicional para esto.
Plantillas
VueJS proporciona plantillas basadas en HTML que unen el DOM con los datos de la instancia de Vue. Vue compila las plantillas en funciones virtuales DOM Render. Podemos hacer uso de la plantilla de las funciones de render y para hacerlo tenemos que reemplazar la plantilla con la función de render.
Directivas
VueJS tiene directivas integradas como v-if, v-else, v-show, v-on, v-bind y v-model, que se utilizan para realizar varias acciones en la interfaz.
Vigilantes
Los observadores se aplican a los datos que cambian. Por ejemplo, elementos de entrada de formulario. Aquí, no tenemos que agregar ningún evento adicional. Watcher se encarga de manejar cualquier cambio de datos haciendo que el código sea simple y rápido.
Enrutamiento
La navegación entre páginas se realiza con la ayuda de vue-router.
Ligero
El script de VueJS es muy ligero y el rendimiento también es muy rápido.
Vue-CLI
VueJS se puede instalar en la línea de comandos mediante la interfaz de línea de comandos vue-cli. Ayuda a construir y compilar el proyecto fácilmente usando vue-cli.
Comparación con otros marcos
Ahora comparemos VueJS con otros marcos como React, Angular, Ember, Knockout y Polymer.
VueJS v / s Reaccionar
Virtual DOM
El DOM virtual es una representación virtual del árbol DOM. Con el DOM virtual, se crea un objeto JavaScript que es el mismo que el DOM real. Cada vez que se necesita realizar un cambio en el DOM, se crea un nuevo objeto JavaScript y se realizan los cambios. Posteriormente, se comparan ambos objetos JavaScript y se actualizan los cambios finales en el DOM real.
VueJS y React usan DOM virtual, lo que lo hace más rápido.
Template v/s JSX
VueJS usa html, js y css por separado. Es muy fácil para un principiante comprender y adoptar el estilo VueJS. El enfoque basado en plantillas para VueJS es muy fácil.
React utiliza el enfoque jsx. Todo es JavaScript para ReactJS. HTML y CSS son parte de JavaScript.
Installation Tools
Reaccionar usos create react app y VueJS usa vue-cli /CDN/npm. Ambos son muy fáciles de usar y el proyecto está configurado con todos los requisitos básicos. React necesita un paquete web para la compilación, mientras que VueJS no. Podemos comenzar con la codificación VueJS en cualquier lugar de jsfiddle o codepen usando la biblioteca cdn.
Popularity
React es más popular que VueJS. La oportunidad de trabajo con React es más que VueJS. Hay un gran nombre detrás de React, es decir, Facebook, que lo hace más popular. Dado que React utiliza el concepto central de JavaScript, utiliza las mejores prácticas de JavaScript. Aquel que trabaje con React definitivamente será muy bueno con todos los conceptos de JavaScript.
VueJS es un marco en desarrollo. Actualmente, las oportunidades laborales con VueJS son menores en comparación con React. Según una encuesta, muchas personas se están adaptando a VueJS, lo que puede hacerlo más popular en comparación con React y Angular. Hay una buena comunidad que trabaja en las diferentes funciones de VueJS. Esta comunidad mantiene el vue-router con actualizaciones periódicas.
VueJS ha tomado las partes buenas de Angular y React y ha construido una biblioteca poderosa. VueJS es mucho más rápido en comparación con React / Angular debido a su biblioteca liviana.
VueJS v / s angular
Similarities
VueJS tiene muchas similitudes con Angular. Directivas como v-if, v-for son casi similares a ngIf, ngFor de Angular. Ambos tienen una interfaz de línea de comandos para la instalación del proyecto y para construirlo. VueJS usa Vue-cli y Angular usa angular-cli. Ambos ofrecen enlace de datos bidireccional, renderizado del lado del servidor, etc.
Complexity
Vuejs es muy fácil de aprender y empezar. Como se discutió anteriormente, un principiante puede tomar la biblioteca CDN de VueJS y comenzar con codepen y jsfiddle.
Para Angular, necesitamos seguir una serie de pasos para la instalación y es un poco difícil para los principiantes comenzar con Angular. Utiliza TypeScript para la codificación, lo que es difícil para las personas que tienen conocimientos básicos de JavaScript. Sin embargo, es más fácil de aprender para los usuarios que pertenecen al fondo Java y C #.
Performance
Decidir el rendimiento depende de los usuarios. El tamaño del archivo de VueJS es mucho más ligero que el de Angular. Se proporciona una comparación del rendimiento del marco en el siguiente enlacehttp://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html
Popularity
En la actualidad, Angular es más popular que VueJS. Muchas organizaciones usan Angular, lo que lo hace muy popular. Las oportunidades de trabajo también son más para candidatos con experiencia en Angular. Sin embargo, VueJS está ocupando un lugar en el mercado y puede considerarse un buen competidor para Angular y React.
Dependencies
Angular proporciona muchas funciones integradas. Tenemos que importar los módulos requeridos y comenzar con ellos, por ejemplo, @ angular / animations, @ angular / form.
VueJS no tiene todas las funciones integradas como Angular y necesita depender de bibliotecas de terceros para trabajar en él.
Flexibility
VueJS se puede fusionar fácilmente con cualquier otro gran proyecto sin ningún problema. Angular no será tan fácil para empezar a trabajar con cualquier otro proyecto existente.
Backward Compatibility
Teníamos AngularJS, Angular2 y ahora Angular4. AngularJS y Angular2 tienen una gran diferencia. La aplicación de proyecto desarrollada en AngularJS no se puede convertir a Angular2 debido a las diferencias principales.
La versión reciente de VueJS es 2.0 y es buena con compatibilidad con versiones anteriores. Proporciona buena documentación, que es muy fácil de entender.
Typescript
Angular usa TypeScript para su codificación. Los usuarios deben tener conocimientos de Typecript para comenzar con Angular. Sin embargo, podemos comenzar con la codificación VueJS en cualquier lugar de jsfiddle o codepen usando la biblioteca cdn. Podemos trabajar con JavaScript estándar, con lo que es muy fácil comenzar.
VueJS v / s Ember
Similarities
Ember proporciona la herramienta de línea de comandos de Ember, es decir, ember-cli para una fácil instalación y compilación para proyectos de Ember.
VueJS también tiene una herramienta de línea de comandos vue-cli para iniciar y construir proyectos.
Ambos tienen características como enrutador, plantilla y componentes que los hacen muy ricos como el marco de la interfaz de usuario.
Performance
VueJS tiene un mejor rendimiento en comparación con Ember. Ember ha agregado un motor de renderizado brillante con el objetivo de mejorar el rendimiento de renderizado, que es un concepto similar a VueJS y React usando DOM virtual. Sin embargo, VueJS tiene un mejor rendimiento en comparación con Ember.
VueJS v / s Knockout
Knockout proporciona una buena compatibilidad con el navegador. Es compatible con la versión inferior de IE, mientras que VueJS no es compatible con IE8 y versiones anteriores. El desarrollo de Knockout se ha ralentizado con el tiempo. No hay mucha popularidad por lo mismo en los últimos tiempos.
Por otro lado, VueJS ha comenzado a ganar popularidad con el equipo de Vue proporcionando actualizaciones periódicas.
Polímero VueJS v / s
La biblioteca de polímeros ha sido desarrollada por Google. Se utiliza en muchos proyectos de Google, como Google I / O, Google Earth, Google Play Music, etc. Ofrece enlace de datos y propiedades calculadas similares a VueJS.
La definición de elemento personalizado de polímero comprende JavaScript / CSS simple, propiedades de elemento, devoluciones de llamada del ciclo de vida y métodos de JavaScript. En comparación, VueJS permite usar fácilmente JavaScript / html y CSS.
Polymer utiliza funciones de componentes web y requiere polyfills para navegadores, que no son compatibles con estas funciones. VueJS no tiene tales dependencias y funciona bien en todos los navegadores de IE9 +.