10 cosas que debe saber sobre el marco frontend de Vue.js
Con el aumento continuo de los marcos JavaScript frontend, incluido el nuevo Vue.js 3, se vuelve vital mantenerse al día con ellos y comprender todo acerca de sus nuevas características.
En este artículo, exploraremos Vue.js 3 y sus funciones recién agregadas. Estas últimas incorporaciones hacen que Vue.js sea aún más robusto, lo que lo convierte en un gran marco a considerar para su próximo proyecto. Aprenderá en detalle 10 cosas que debe saber sobre Vue.js y cómo lo ayudará a ofrecer aplicaciones frontend escalables y de alto rendimiento.
¿Listo? ¡Vamos!
¿Qué es Vue.js?
Según Evan You, el creador de Vue.js:
淰ue.js es una solución más flexible y menos obstinada. Es solo una capa de interfaz para que pueda usarla como una característica ligera en las páginas en lugar de un SPA completo.滭/em>
Quería crear un marco frontend que fuera tan poderoso como Angular, pero también más ligero y flexible sin todos los complementos y conceptos innecesarios que vienen con Angular.
El resultado fue Vue.js, que es uno de los marcos frontend más populares en uso en la actualidad.
Vue.js es el segundo framework frontend más popular. (Fuente: Estado de JS 2020)
Por qué los desarrolladores usan Vue.js
Diferentes razones impulsan a un desarrollador a utilizar una tecnología en particular. Analicemos por qué creemos que debería aprender Vue.js.
Para comenzar, Vue.js es uno de los marcos más sencillos que existen para que la mayoría de los desarrolladores se sumerjan, ya que este marco utiliza JavaScript. Por lo tanto, cualquier persona que tenga conocimientos básicos de JavaScript podrá desarrollar con Vue.js.
La herramienta CLI de Vue, combinada con otras herramientas de desarrollo frontend, hace que la configuración de Vue.js sea muy sencilla. Está configurado con algunas funciones de forma predeterminada, pero también puede compilar código con una lógica y estructura SECA (No se repita).
La reactividad también está integrada en Vue.js. Eso significa que la funcionalidad en tiempo real que era popular en el marco Angular es muy sencilla con Vue.js. Por ejemplo, puede aplicar fácilmente una directiva simple como v-if en su aplicación Vue.js.
A continuación, analicemos las principales ventajas y desventajas de Vue.js.
Pros y contras de Vue.js
Vue.js es el segundo marco más popular en uso hoy en día. Veamos qué hace que se quede con los desarrolladores web y qué los aleja.
Vue.js Pro
Comenzaremos explorando los aspectos positivos de Vue.js.
Tamaño pequeño
Vue.js tiene un tamaño descargable muy pequeño de aproximadamente 18 KB, que es excelente en comparación con otros marcos con tamaños grandes. Sin embargo, con ese tamaño, Vue.js tendrá un impacto positivo en el SEO y la experiencia de usuario de su aplicación frontend.
Componente de archivo único y legibilidad
Vue.js utiliza una arquitectura basada en componentes, por lo que separa grandes fragmentos de código en componentes más pequeños. Además, en Vue.js, todo es un componente, y cada componente está escrito con HTML, CSS y JavaScript, lo que fomenta la legibilidad y la simplicidad.
Sistema de herramientas sólidas
Vue.js es compatible con muchas herramientas de desarrollo front-end listas para usar con poca o ninguna configuración de su parte. Por ejemplo, Vue.js admite herramientas como Babel y Webpack. Además, proporciona pruebas unitarias, bibliotecas de pruebas de un extremo a otro, sistemas de enrutamiento flexibles y fáciles de usar, administradores de estado, representación del lado del servidor (SSR) y más.
Fácil de usar
Si ha usado Vue.js antes, estará de acuerdo en que es muy fácil de usar. Moderniza el enfoque habitual de desarrollo web, lo que facilita que cualquier principiante comience y se sienta cómodo con solo unas pocas prácticas.
Contras de Vue.js
Ahora que hemos cubierto los pros, exploremos los aspectos negativos de Vue.js.
Reactividad Complejidad
La implementación del enlace bidireccional en Vue.js es una herramienta útil para administrar los componentes de Vue.js. El enlace bidireccional se refiere a compartir datos entre una clase de componente y su plantilla, se desarrolló de modo que si los datos cambian en una ubicación, automáticamente actualiza las demás.
Sin embargo, hay un problema con respecto a cómo funciona la reactividad mientras que el sistema de reactividad vuelve a representar solo los fragmentos de datos activados. A veces, hay algunos errores durante la lectura de datos, por lo que es necesario aplanar los datos. Puede leer este problema conocido y cómo se soluciona en el sitio de Vue.js.
Barrera del idioma
Inicialmente, Vue.js fue adoptado principalmente por los chinos, con grandes empresas como Xiaomi y Alibaba ayudando a popularizar el marco y creando demanda en el mercado laboral. Sin embargo, con la adopción significativa de muchas empresas chinas, muchos foros, canales de discusión y similares estaban principalmente en chino, lo que dificultaba la adopción para los desarrolladores que no hablaban como nativos.
A día de hoy, este ya no es el caso, ya que Vue.js ha evolucionado para incorporar soporte en muchos idiomas, pero hay algunos idiomas con menos soporte que otros.
Riesgos de exceso de flexibilidad
Como se indicó anteriormente, Vue.js es muy flexible y fácil de usar. Por lo tanto, es fácil tener mucho código espagueti en todas partes, ya que todos los miembros de un equipo empresarial pueden tener opiniones diferentes sobre cómo hacer las cosas.
De los pros y los contras de Vue.js discutidos anteriormente, es posible que ya haya detectado algunas características que le encantan y algunas que no funcionarán bien para usted.
10 cosas que debe saber sobre Vue.js
A continuación se encuentran las diez cosas que necesita saber sobre Vue.js y por qué es esencial conocerlas.
Propiedades calculadas
Una propiedad calculada es una de las características más utilizadas en Vue.js. Una propiedad calculada le permite crear propiedades que se pueden modificar, manipular y mostrar datos de manera eficiente y legible.
Es útil cuando desea repetir muchos métodos pequeños para cosas como el formateo, el cambio de valores o un proceso extenso que necesita desencadenar en ciertas situaciones.
Las propiedades calculadas ayudan a eliminar el exceso de mucha lógica en su plantilla. Demasiada de esta lógica puede hacer que su código se hinche y sea difícil de mantener rápidamente.
Suponiendo que desea formatear una cadena en letras mayúsculas, así es como podría hacerlo:
<template>
What happens if you need to change the value variable in 50 different places? Bloated, right? Well, computed properties are here to help:
<template>
You can easily change toUpperCase() to toLowerCase(), and it will reflect all over from a single point.
Event Handling
Vue.js makes the child and parent communication a breeze with the use of $emit and v-on. It becomes effortless and straightforward to handle communication between component hierarchies.
The $emit function accepts two parameters: a string for name and an optional value to be emitted.
The v-on:event-name is used at the child component to receive the event emitted by its parent component:
<template>
Once you trigger the Add button, the onClick method triggers the $emit event, which emits the add event to a child component listening for add event.
Let檚 take a look at how to listen for an event:
<template>
The above code listens to the add event and responds by changing the value of showSaveMsg to true, which shows the message again.
Lazy Loading / Async Components
Lazy loading is one of the best performance hacks for Vue.js, where components are added and rendered asynchronously or on-demand, which will significantly reduce the file size, HTTP request-response time, and so on.
Want to know how we increased our traffic over 1000%?
Join 20,000+ others who get our weekly newsletter with insider WordPress tips!
Subscribe Now
Lazy loading is achieved with Webpack dynamic imports, which also supports code splitting.
Vue.js allows lazy loading of components and can be achieved globally with the following scripts:
import Vue from "vue";
You can achieve it locally with a component like below:
<template>
We can achieve significant reusability in Vue.js with global components, where you register a component once and then use it everywhere within your Vue.js instance.
Global components are an important feature and can save you lots of time registering components individually every time, but it can easily be misused by registering all components globally. Registering all components globally can easily lead to a large build size resulting in poor SEO and slower page load time.
Make sure always to register global components that have many use cases across your project as shown below:
import Vue from "vue";
One of the most powerful features of Vue.js is Components; it helps you extend essential HTML elements, CSS, and JavaScript to encapsulate reusable code.
Components can help break down large projects into smaller, reusable pieces that we can extend across the entire project, thereby encouraging the DRY (Don檛 Repeat Yourself) principle of software engineering.
It can provide organization and encapsulations for large projects, reusable code, and can be separated into .vue files.
<template>
The above scripts create a custom button component that we can reuse within our project. Each component has its HTML, CSS, and JavaScript.
Testing
Vue.js provides one of the most robust testing libraries, making unit testing with Jest and Mocha or end-to-end testing a breeze with little to no configuration.
A quick look into testing with these tools could be worth it for you. So let檚 explore installing, setting up, and testing a demo project below.
If you檙e using the recommended Vue CLI tool to set up your project, run the following commands:
vue add unit-jest //to run unit test with jest
Next, after the setup, include the code below, which demonstrates how to test a simple component:
// Import the `mount()` method from Vue Test Utils
The Vue Testing Library has two great options to test your components: Mount and Shallow.
If you want to test a component with complete isolation, use the shallow method. Otherwise, if you need to work on a component with sub-components that you want to ensure communication, the mount option works very well.
The Powerful Vue CLI Tool
Vue CLI is an excellent CLI tool and gives a good deal of power to any Vue developer. With it, you can quickly test out any component in isolation. The great thing about Vue CLI is that you can fully develop a component in isolation, test it, and still have access to hot reloading as you iterate over that particular component.
To demonstrate, let檚 install Vue CLI globally:
npm install -g @vue/cli
A continuación, puede probar cualquier componente ejecutando el siguiente comando:
vue serve ./components/views/Home.vue
Si desea extraer un componente en particular para, por ejemplo, compartirlo con sus colegas, puede lograrlo usando el siguiente comando:
vue build --target lib --name goldenRule ./components/views/Home
Vue CLI es muy poderoso y puede ahorrar mucho tiempo productivo si domina el arte de usarlo. Si desea obtener más información, puede echar un vistazo a la documentación oficial.
Gestión de accesorios
La administración de accesorios es vital para el componente Vue, ya que se puede crear de diferentes maneras. También puede validar accesorios, crear múltiples accesorios y modificarlos según sea necesario.
Para crear una nueva propiedad en un componente de Vue, puede hacerlo de varias maneras diferentes. Suponiendo que tiene su componente, necesita crear el isAdmin apuntalar.
Veamos las diferentes formas en que podrías hacerlo:
<template>
Validating your prop is very important. Luckily, it檚 also very simple:
// ...
To assign value to the prop in a parent component:
<template>
With all the great features and benefits of using Vue.js to create frontend applications, Vue.js itself is still a client-side library that only renders and manipulates DOM elements.
Server-side rendering helps client-side frameworks such as Vue.js achieve better. Search Engine crawlers will see fully rendered pages of your website when crawling.
To have your website indexed by Google and Bing faster, your website needs to have a faster and higher time-to-content score. That檚 what Server-side rendering in Vue.js helps you achieve.
Server-side rendering (SSR) is a popular technique for rendering a regular client-side single-page app (SPA) on the server and then sending a fully rendered page to the reader.
When the page is rendered on the server-side, it sends it to the client as a response. Thus, every piece of information has already been rendered while the browser displays the search engine page.
Achieving SSR in Vue.js is difficult for beginners. It will be easier to use Nuxt.js, which has a built-in SSR and a very low learning curve.
Deployment
Vue.js will present many warnings, errors, and bloated file sizes during development, but these issues vanish immediately when you switch on production for deployment. Vue.js will automatically configure Webpack build tools, minifications, CSS extraction and purging, caching, tracking runtime errors, and more.
Vue.js makes your deployment process very easy by automatically configuring and setting up the production environment without any extra steps from the developer.
To deploy your Vue.js application, you can read through its general guides.
Summary
In this article, we檝e explored in detail what Vue.js is, why you should use it, its pros and cons, and the 10 things you should know about it.
Hopefully, you檝e advanced your knowledge of Vue.js to deliver scalable and high-performing frontend applications.
Keep coding!
If you have questions or suggestions, we檙e eager to hear from you. Talk to us in the comments section below!
If you enjoyed this article, then you檒l love 檚 WordPress hosting platform. Turbocharge your website and get 24/7 support from our veteran WordPress team. Our Google Cloud powered infrastructure focuses on scalability, performance, and security. Let us show you the difference! Check out our plans
Covid-19 news: NHS boss calls for UK to implement 楶lan B橖/a> Orcauboat Waters Cleaning Robots Brings New Market Opportunities Samsung Galaxy Watch 4 gets a lot of features to make it a better Apple Watch 7 rival Raspberry Pi 4 price increase, due to global supply chain In the Asia-Pacific region, cardiovascular testing has seen the fastest growth in the last decade. Latest Technology News Covid-19 news: NHS boss calls for UK to implement 楶lan B橖/a> Orcauboat Waters Cleaning Robots Brings New Market Opportunities Samsung Galaxy Watch 4 gets a lot of features to make it a better Apple Watch 7 rival Raspberry Pi 4 price increase, due to global supply chain In the Asia-Pacific region, cardiovascular testing has seen the fastest growth in the last decade.
