{"id":42878,"date":"2021-08-12T08:25:03","date_gmt":"2021-08-12T06:25:03","guid":{"rendered":"https:\/\/kinsta.com\/?p=98454"},"modified":"2023-08-23T11:36:16","modified_gmt":"2023-08-23T09:36:16","slug":"vue-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/vue-js\/","title":{"rendered":"10 cosas que debes saber sobre Vue.js Frontend Framework"},"content":{"rendered":"

Con el continuo aumento de los frontend JavaScript frameworks<\/a>, incluido el nuevo Vue.js 3, se ha vuelto vital mantenerse al d\u00eda y entender todas sus nuevas caracter\u00edsticas.<\/p>\n

En este art\u00edculo, exploraremos Vue.js 3 y sus nuevas caracter\u00edsticas<\/a>. Estas \u00faltimas adiciones hacen que Vue.js sea a\u00fan m\u00e1s robusto, convirti\u00e9ndolo en un gran framework a considerar para tu pr\u00f3ximo proyecto. Aprender\u00e1s en detalle 10 cosas que debes saber sobre Vue.js y c\u00f3mo te ayudar\u00e1 a entregar aplicaciones frontend escalables y de alto rendimiento.<\/p>\n

\u00bfPreparados? Vamos.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

\u00bfQu\u00e9 es Vue.js?<\/h2>\n

Seg\u00fan Evan You, el creador de Vue.js:<\/p>\n

\u00abVue.js es una soluci\u00f3n m\u00e1s flexible y menos opinable. Es solo una capa de interfaz, por lo que puedes usarla como una funci\u00f3n ligera en las p\u00e1ginas en lugar de una SPA completa\u00bb.<\/em><\/p><\/blockquote>\n

Quer\u00eda crear un frontend framework que fuera tan potente como Angular<\/a>, pero tambi\u00e9n m\u00e1s \u00abligero\u00bb y flexible sin todos los plugins y conceptos innecesarios que vienen con Angular.<\/p>\n

El resultado fue Vue.js, que es uno de los frontend frameworks m\u00e1s populares en la actualidad.<\/p>\n

\"Vue.js
Vue.js es el segundo frontend framework m\u00e1s popular. (Fuente: State of JS 2020<\/a>)<\/figcaption><\/figure>\n\n

Por qu\u00e9 los desarrolladores utilizan Vue.js<\/h2>\n

Diferentes razones impulsan a un desarrollador<\/a> a utilizar una tecnolog\u00eda en particular. Vamos a discutir por qu\u00e9 creemos que deber\u00edas aprender Vue.js.<\/p>\n

Para empezar, Vue.js es uno de los frameworks m\u00e1s sencillos para la mayor\u00eda de los desarrolladores, ya que este framework utiliza JavaScript. Por lo tanto, cualquiera que tenga conocimientos b\u00e1sicos de JavaScript podr\u00e1 desarrollar con Vue.js.<\/p>\n

La herramienta Vue CLI combinada con otras herramientas de desarrollo<\/a> frontend hace que la configuraci\u00f3n de Vue.js sea muy f\u00e1cil. Est\u00e1 configurado con algunas funcionalidades por defecto, pero tambi\u00e9n puedes construir c\u00f3digo con una l\u00f3gica y estructura DRY (Don’t Repeat Yourself).<\/p>\n

La reactividad tambi\u00e9n est\u00e1 integrada en Vue.js. Eso significa que la funcionalidad en tiempo real que era popular en el marco Angular es una brisa con Vue.js. Por ejemplo, puedes aplicar f\u00e1cilmente una simple directiva como v-if<\/code> en tu aplicaci\u00f3n Vue.js.<\/p>\n

A continuaci\u00f3n, vamos a discutir los principales ventajas y desventajas de Vue.js.<\/p>\n

Ventajas y desventajas de Vue.js<\/h2>\n

Vue.js es el segundo framework m\u00e1s popular en uso hoy en d\u00eda. Veamos por qu\u00e9 le gusta a los desarrolladores web y por qu\u00e9 se alejan de \u00e9l.<\/p>\n

Ventajas de Vue.js<\/h3>\n

Empezaremos explorando los aspectos positivos de Vue.js.<\/p>\n

Tama\u00f1o peque\u00f1o<\/h4>\n

Vue.js tiene un tama\u00f1o de descarga muy peque\u00f1o, de unos 18 KB, que es excelente en comparaci\u00f3n con otros frameworks de gran tama\u00f1o. Sin embargo, con ese tama\u00f1o, Vue.js tendr\u00e1 un impacto positivo en el SEO y la UX de tu aplicaci\u00f3n frontend<\/a>.<\/p>\n

Componente de un solo archivo y legibilidad<\/h4>\n

Vue.js utiliza una arquitectura basada en componentes, separando as\u00ed grandes trozos de c\u00f3digo en componentes m\u00e1s peque\u00f1os. Adem\u00e1s, en Vue.js, todo es un componente, y cada componente est\u00e1 escrito con HTML, CSS y JavaScript, lo que favorece la legibilidad y la simplicidad.<\/p>\n

Sistema de herramientas s\u00f3lidas<\/h4>\n

Vue.js es compatible con muchas herramientas de desarrollo de front-end directamente desde la caja, con poca o ninguna configuraci\u00f3n por tu parte. Por ejemplo, Vue.js soporta herramientas como Babel y Webpack<\/a>. Adem\u00e1s, proporciona pruebas unitarias, bibliotecas de pruebas de extremo a extremo, sistemas de enrutamiento flexibles y f\u00e1ciles de usar, gestores de estado, renderizaci\u00f3n del lado del servidor (SSR), y m\u00e1s.<\/p>\n

F\u00e1cil de usar<\/h4>\n

Si has usado Vue.js antes, estar\u00e1s de acuerdo en que es muy f\u00e1cil de usar. Moderniza el enfoque habitual de desarrollo web, lo que hace que cualquier principiante pueda saltar directamente y sentirse c\u00f3modo con s\u00f3lo unas pocas pr\u00e1cticas.<\/p>\n

Desventajas de Vue.js<\/h3>\n

Ahora que hemos cubierto los pros, vamos a explorar los negativos de Vue.js.<\/p>\n

Complejidad de la reactividad<\/h4>\n

La implementaci\u00f3n del two-way binding en Vue.js es una herramienta muy \u00fatil para gestionar los componentes de Vue.js. La vinculaci\u00f3n bidireccional se refiere a compartir datos entre una clase de componente y su plantilla, est\u00e1 desarrollada de manera que si los datos cambian en un lugar, autom\u00e1ticamente se actualizan los otros.<\/p>\n

Sin embargo, hay un problema relacionado con el funcionamiento de la reactividad, ya que el sistema de reactividad s\u00f3lo devuelve los trozos de datos activados. A veces, hay algunos errores durante la lectura de los datos, por lo que requiere que los datos sean aplanados. Puedes leer este problema conocido y c\u00f3mo se soluciona en el sitio de Vue.js<\/a>.<\/p>\n

Barrera ling\u00fc\u00edstica<\/h4>\n

Inicialmente, Vue.js fue adoptado principalmente por los chinos, con grandes empresas como Xiaomi y Alibaba que ayudaron a popularizar el framework y a crear demanda en el mercado laboral. Sin embargo, con la importante adopci\u00f3n de muchas empresas chinas, muchos foros, canales de discusi\u00f3n y similares estaban principalmente en chino, lo que dificultaba la adopci\u00f3n para los desarrolladores no nativos.<\/p>\n

A d\u00eda de hoy, esto ya no es as\u00ed, ya que Vue.js ha evolucionado para incorporar soporte en muchos idiomas<\/a>, pero hay algunos idiomas que tienen menos soporte que los dem\u00e1s.<\/p>\n

Riesgos de exceso de flexibilidad<\/h4>\n

Como se ha dicho anteriormente, Vue.js es muy flexible y f\u00e1cil de usar. Por lo tanto, es f\u00e1cil tener un mont\u00f3n de c\u00f3digo espagueti en todas partes, ya que todo el mundo en un equipo de la empresa puede tener diferentes opiniones sobre c\u00f3mo hacer las cosas.<\/p>\n

A partir de los pros y los contras de Vue.js comentados anteriormente, es posible que ya hayas detectado algunas caracter\u00edsticas que te encantan y otras que no te servir\u00e1n.<\/p>\n

10 cosas que deber\u00edas saber sobre Vue.js<\/h2>\n

A continuaci\u00f3n, las diez cosas que debes saber sobre Vue.js y por qu\u00e9 es esencial conocerlas.<\/p>\n

Propiedades calculadas<\/h3>\n

Una propiedad computada es una de las caracter\u00edsticas m\u00e1s utilizadas en Vue.js. Una propiedad calculada te permite crear propiedades que pueden ser modificadas, manipuladas y mostrar datos de una manera eficiente y legible.<\/p>\n

Es muy \u00fatil cuando quieres repetir muchos m\u00e9todos peque\u00f1os para cosas como el formato, el cambio de valores, o un vasto proceso que necesitas activar en ciertas situaciones.<\/p>\n

Las propiedades computadas ayudan a eliminar el exceso de mucha l\u00f3gica en la plantilla. Demasiada l\u00f3gica puede hacer que tu c\u00f3digo se infle y sea dif\u00edcil de mantener r\u00e1pidamente.<\/p>\n

Suponiendo que quieras formatear una cadena a may\u00fasculas, as\u00ed es como podr\u00edas hacerlo:<\/p>\n

<template>\n  <div>\n    <p> I love {{ value.toUpperCase() }} <\/p>\n  <\/div>\n<\/template>\n<\/code><\/pre>\n
\u00bfQu\u00e9 pasa si necesitas cambiar la variable de value<\/code> en 50 lugares diferentes? Es muy complicado, \u00bfverdad? Bueno, las propiedades computadas<\/a> est\u00e1n aqu\u00ed para ayudar:<\/p>\n
<template>\n  <div>\n    <p> I love {{ value }} <\/p>\n  <\/div>\n<\/template>\n<script>\n  export default {\n    computed:{\n      value(){\n        return this.value.toUpperCase()\n      }\n    }\n  }\n<\/script><\/code><\/pre>\n
Puedes cambiar f\u00e1cilmente de toUpperCase()<\/code> a toLowerCase()<\/code>, y se reflejar\u00e1 todo desde un \u00fanico punto.<\/p>\n
Manejo de eventos<\/h3>\n
Vue.js hace que la comunicaci\u00f3n entre el hijo y el padre sea muy f\u00e1cil con el uso de $emit<\/code> y v-on<\/code>. La comunicaci\u00f3n entre las jerarqu\u00edas de componentes se realiza sin esfuerzo y de forma sencilla.<\/p>\n
La funci\u00f3n $emit<\/code> acepta dos par\u00e1metros: una cadena para el nombre y un valor opcional a emitir.<\/p>\n
El v-on:event-name<\/code> se utiliza en el componente hijo para recibir el evento emitido por su componente padre:<\/p>\n
<template>\n  <section>\n    <button @click=\"onClick\">Add <\/button>\n  <\/section>\n<\/template>\n<script>\nexport default {\n  name: \"AddEvent\",\n  methods: {\n    onClick() { \n      this.$emit('add', this.data);\n    }\n  }\n}\n<\/script><\/code><\/pre>\n
Una vez que se activa el bot\u00f3n Add<\/code>, el m\u00e9todo onClick<\/code> activa el evento $emit<\/code>, que emite el evento add<\/code> a un componente hijo que escucha el evento add<\/code>.<\/p>\n
Veamos c\u00f3mo escuchar un evento:<\/p>\n
<template>\n  <section>\n  <p v-show=\"showSaveMsg\">This component is listening to the ADD event<\/p>\n  <add-event v-on:add=\"onAdd\"><\/add-event>\n  <\/section>\n<\/template>\n<script>\nexport default {\n  data(){\n    return {\n      showSaveMsg: false\n    }\n  },\n  components:{\n    AddEvent: () => import('.\/AddEvent')\n  },\n  methods: {\n    onAdd() { \n        this.showSaveMsg = true;\n    }\n  }\n}\n<\/script><\/code><\/pre>\n
El c\u00f3digo anterior escucha el evento add<\/code> y responde cambiando el valor de showSaveMsg<\/code> a true<\/code>, lo que muestra el mensaje de nuevo.<\/p>\n
Lazy Loading \/ Componentes as\u00edncronos<\/h3>\n
La lazy loading<\/a> es uno de los mejores hacks de rendimiento para Vue.js, en el que los componentes se a\u00f1aden y renderizan de forma as\u00edncrona o bajo demanda, lo que reducir\u00e1 significativamente el tama\u00f1o del archivo, el tiempo de petici\u00f3n-respuesta HTTP, etc.<\/p>\n
Lazy loading se consigue con las importaciones din\u00e1micas de Webpack, que tambi\u00e9n admite la divisi\u00f3n del c\u00f3digo.<\/p>\n
Vue.js permite lazy loading de los componentes y puede lograrse globalmente con los siguientes scripts:<\/p>\n
import Vue from \"vue\";\nVue.component(\"new-component\", () => import(\".\/components\/NewComponent.vue\"));\n<\/code><\/pre>\n
Puedes conseguirlo localmente con un componente como el siguiente:<\/p>\n
<template>\n  <div>\n    <component><\/component>\n  <\/div>\n<\/template>\n<script>\nexport default {\n  components: {\n    'Component': () => import('.\/Component')\n  }\n}\n<\/script><\/code><\/pre>\n
Componentes globales<\/h3>\n
Podemos lograr una reutilizaci\u00f3n significativa en Vue.js con componentes globales, donde se registra un componente una vez y luego se utiliza en todas partes dentro de su instancia Vue.js.<\/p>\n
Los componentes globales son una caracter\u00edstica importante y pueden ahorrarte mucho tiempo registrando componentes individualmente cada vez, pero puede ser f\u00e1cilmente mal utilizado registrando todos los componentes globalmente. Registrar todos los componentes globalmente puede conducir f\u00e1cilmente a un gran tama\u00f1o de construcci\u00f3n que resulta en un pobre SEO y un tiempo de carga de la p\u00e1gina<\/a> m\u00e1s lento.<\/p>\n
Aseg\u00farate de registrar siempre los componentes globales que tienen muchos casos de uso en tu proyecto, como se muestra a continuaci\u00f3n:<\/p>\n
import Vue from \"vue\";\nVue.component(\"new-component\", () => import(\".\/componetns\/NewComponent.vue\"));<\/code><\/pre>\n
Componente de archivo \u00fanico<\/h3>\n
Una de las caracter\u00edsticas m\u00e1s potentes de Vue.js es Components; te ayuda a extender elementos esenciales de HTML, CSS y JavaScript para encapsular c\u00f3digo reutilizable.<\/p>\n
Los componentes pueden ayudar a dividir los grandes proyectos en piezas m\u00e1s peque\u00f1as y reutilizables que podemos extender a todo el proyecto, fomentando as\u00ed el principio DRY (Don’t Repeat Yourself) de la ingenier\u00eda de software.<\/p>\n
Puede proporcionar organizaci\u00f3n y encapsulaciones para grandes proyectos, c\u00f3digo reutilizable, y puede ser separado en archivos .vue<\/code>.<\/p>\n
<template>\n  <section>\n    <button @click=\"onClick\">Add<\/button>\n  <\/section>\n<\/template>\n\n<script>\nexport default {\n  name: \"CustomButtom\",\n  methods: {\n    onClick() { \n      this.$emit('add', this.data);\n    }\n  }\n}\n<\/script>\n\n<style scoped>\n  button{\n    \/** Button Styles *\/\n  }\n<\/style><\/code><\/pre>\n
Los scripts anteriores crean un componente de bot\u00f3n personalizado que podemos reutilizar en nuestro proyecto. Cada componente tiene su HTML, CSS y JavaScript.<\/p>\n
Prueba<\/h3>\n
Vue.js proporciona una de las bibliotecas de pruebas m\u00e1s robustas, lo que hace que las pruebas unitarias con Jest y Mocha o las pruebas<\/a> de extremo a extremo sean muy sencillas sin apenas configuraci\u00f3n.<\/p>\n
Un r\u00e1pido vistazo a las pruebas con estas herramientas podr\u00eda valer la pena para usted. As\u00ed que vamos a explorar la instalaci\u00f3n, configuraci\u00f3n y prueba de un proyecto de demostraci\u00f3n a continuaci\u00f3n.<\/p>\n
Si est\u00e1s usando la herramienta recomendada Vue CLI<\/a> para configurar tu proyecto, ejecuta los siguientes comandos:<\/p>\n
vue add unit-jest \/\/to run unit test with jest\n\nnpm install --save-dev @vue\/test-utils\n<\/code><\/pre>\n
A continuaci\u00f3n, despu\u00e9s de la configuraci\u00f3n, incluya el c\u00f3digo siguiente, que demuestra c\u00f3mo probar un componente simple:<\/p>\n
\/\/ Import the `mount()` method from Vue Test Utils\nimport { mount } from '@vue\/test-utils'\n\n\/\/ The component to test\nconst MessageComponent = {\n  template: '<p>{{ message }}<\/p>',\n  props: ['message']\n}\n\ntest('displays a message', () => {\n  \/\/ mount() returns a wrapped Vue component we can interact with\n  const wrapper = mount(MessageComponent, {\n    propsData: {\n      msg: 'Welcome to our testing world'\n    }\n  })\n\n  \/\/ Assert the rendered text of the component\n  expect(wrapper.text()).toContain('Welcome to our testing world')\n})<\/code><\/pre>\n
La biblioteca de pruebas Vue tiene dos grandes opciones para probar sus componentes: Mount y Shallow.<\/p>\n
Si quieres probar un componente con un aislamiento completo, utiliza el m\u00e9todo shallow<\/code>. De lo contrario, si necesitas trabajar en un componente con subcomponentes que quieres asegurar la comunicaci\u00f3n, la opci\u00f3n de mount<\/code> funciona muy bien.<\/p>\n
La potente herramienta Vue CLI<\/h3>\n
Vue CLI es una excelente herramienta CLI<\/a> y da una buena cantidad de poder a cualquier desarrollador de Vue. Con ella, puedes probar r\u00e1pidamente cualquier componente de forma aislada. Lo mejor de Vue CLI es que puedes desarrollar completamente un componente de forma aislada, probarlo y seguir teniendo acceso a la recarga en caliente mientras iteras sobre ese componente en particular.<\/p>\n
Para demostrarlo, vamos a instalar Vue CLI de forma global:<\/p>\n
npm install -g @vue\/cli<\/code><\/pre>\n
A continuaci\u00f3n, puedes probar cualquier componente ejecutando el siguiente comando:<\/p>\n
vue serve .\/components\/views\/Home.vue<\/code><\/pre>\n
Si deseas extraer un componente concreto para, por ejemplo, compartirlo con tus colegas, puedes conseguirlo utilizando el siguiente comando:<\/p>\n
vue build --target lib --name goldenRule .\/components\/views\/Home<\/code><\/pre>\n
Vue CLI es muy potente y puede ahorrar una tonelada de tiempo productivo si dominas el arte de usarlo. Si quieres aprender m\u00e1s, puedes echar un vistazo a la documentaci\u00f3n oficial<\/a>.<\/p>\n
Gesti\u00f3n de props<\/h3>\n
La gesti\u00f3n de los props es vital para el componente Vue, ya que se pueden crear de diferentes maneras. Tambi\u00e9n puedes validar props, crear m\u00faltiples props y modificarlos seg\u00fan sea necesario.<\/p>\n
Para crear una nueva propiedad en un componente Vue, puedes hacerlo de varias maneras. Asumiendo que tienes tu componente, necesitas crear la prop isAdmin<\/code>.<\/p>\n
Veamos las diferentes formas de hacerlo:<\/p>\n
<template>\n  <section>\n    <component v-if=\"isAdmin\"><\/component>\n  <\/section>\n<\/template>\n<script>\nexport default {\n  name: 'Component',\n\n \/\/ One\n  props: {\n    isAdmin: {\n      type: Boolean,\n      default: false,\n      required: true\n    }\n  },\n \n \/\/ Two\n  props: ['isAdmin'],\n\n \/\/ Three\n  props: {\n    isAdmin: Boolean\n  }\n\n}\n<\/script><\/code><\/pre>\n
Validar tu prop es muy importante. Por suerte, tambi\u00e9n es muy sencillo:<\/p>\n
\/\/ ...\n\n \/\/ One\n  props: {\n    isAdmin: {\n      default: false,\n      required: true,\n      validator: function(value) {\n        return typeof === 'boolean';\n      }\n    }\n  },\n\n\/\/ ...<\/code><\/pre>\n
Por \u00faltimo, modificar los accesorios es tan f\u00e1cil como reajustar sus valores:<\/h3>\n
\/\/...\n\nmethods: {\n  isAdmin() {\n    this.isAdmin = true;\n  }\n}\n\n\/\/..\n<\/code><\/pre>\n
Para asignar el valor a la prop en un componente padre:<\/p>\n
<template>\n  <section>\n    <component :isAdmin=\"true\"><\/component>\n  <\/section>\n<\/template><\/code><\/pre>\n
Renderizaci\u00f3n del lado del servidor (SSR)<\/h3>\n
Con todas las grandes caracter\u00edsticas y beneficios de usar Vue.js para crear aplicaciones frontend, Vue.js en s\u00ed mismo sigue siendo una biblioteca del lado del cliente que s\u00f3lo renderiza y manipula elementos del DOM.<\/p>\n
El renderizado del lado del servidor ayuda a los frameworks del lado del cliente, como Vue.js, a obtener mejores resultados. Los rastreadores de los motores de b\u00fasqueda ver\u00e1n las p\u00e1ginas de tu sitio web completamente renderizadas cuando las rastreen.<\/p>\n
Para que tu sitio web sea indexado<\/a> m\u00e1s r\u00e1pido, por Google y Bing, tu sitio web necesita tener una puntuaci\u00f3n m\u00e1s r\u00e1pida y m\u00e1s alta de tiempo de contenido. Eso es lo que el renderizado del lado del servidor en Vue.js te ayuda a conseguir.<\/p>\n
El renderizado del lado del servidor (SSR) es una t\u00e9cnica popular para renderizar una aplicaci\u00f3n de una sola p\u00e1gina (SPA) del lado del cliente en el servidor y luego enviar una p\u00e1gina completamente renderizada al lector.<\/p>\n
Cuando la p\u00e1gina se renderiza en el lado del servidor, \u00e9ste la env\u00eda al cliente como respuesta. Por lo tanto, toda la informaci\u00f3n ya se ha renderizado mientras el navegador muestra la p\u00e1gina del buscador.<\/p>\n
Lograr el SSR en Vue.js<\/a> es dif\u00edcil para los principiantes. Ser\u00e1 m\u00e1s f\u00e1cil usar Nuxt.js<\/a>, que tiene un SSR incorporado y una curva de aprendizaje muy baja.<\/p>\n
Despliegue<\/h3>\n
Vue.js presentar\u00e1 muchas advertencias, errores y tama\u00f1os de archivos hinchados durante el desarrollo, pero estos problemas desaparecen inmediatamente cuando se activa la producci\u00f3n para el despliegue. Vue.js configurar\u00e1 autom\u00e1ticamente las herramientas de compilaci\u00f3n de Webpack, las minificaciones<\/a>, la extracci\u00f3n y purga de CSS, el almacenamiento en cach\u00e9, el seguimiento de los errores en tiempo de ejecuci\u00f3n y mucho m\u00e1s.<\/p>\n
Los clientes de Kinsta<\/a> pueden plantearse utilizar la funci\u00f3n de minificaci\u00f3n de c\u00f3digo<\/a> integrada a la que pueden acceder directamente en el panel de control de MyKinsta<\/a>. Esto les permite habilitar f\u00e1cilmente la minificaci\u00f3n autom\u00e1tica de CSS y JavaScript con un simple clic.<\/p>\n
Vue.js hace que tu proceso de despliegue sea muy f\u00e1cil al configurar y establecer autom\u00e1ticamente el entorno de producci\u00f3n sin ning\u00fan paso adicional por parte del desarrollador.<\/p>\n
Para desplegar tu aplicaci\u00f3n Vue.js<\/a>, puedes leer sus gu\u00edas generales.<\/p>\n
<\/span><\/p>\n
Resumen<\/h2>\n
En este art\u00edculo, hemos explorado en detalle qu\u00e9 es Vue.js, por qu\u00e9 deber\u00edas usarlo, sus pros y sus contras, y las 10 cosas que deber\u00edas saber sobre \u00e9l.<\/p>\n
Con suerte, habr\u00e1s avanzado en tus conocimientos de Vue.js para ofrecer aplicaciones frontend escalables y de alto rendimiento.<\/p>\n
Sigue codificando!<\/p>\n
Si tienes alguna pregunta o sugerencia, estamos deseando escucharla. Habla con nosotros en la secci\u00f3n de comentarios m\u00e1s abajo.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Con el continuo aumento de los frontend JavaScript frameworks, incluido el nuevo Vue.js 3, se ha vuelto vital mantenerse al d\u00eda y entender todas sus nuevas …<\/p>\n","protected":false},"author":193,"featured_media":42880,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[858,857],"topic":[1296,1297,1333],"class_list":["post-42878","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript-framework","tag-vue-js","topic-frameworks-javascript","topic-tutoriales-javascript","topic-vue-js"],"yoast_head":"\n10 cosas que debes saber sobre Vue.js Frontend Framework<\/title>\n<meta name=\"description\" content=\"Explora 10 razones por las que deber\u00edas dar a Vue.js una segunda mirada como biblioteca JS frontend para tu pr\u00f3ximo proyecto de desarrollo web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/vue-js\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 cosas que debes saber sobre Vue.js Frontend Framework\" \/>\n<meta property=\"og:description\" content=\"Explora 10 razones por las que deber\u00edas dar a Vue.js una segunda mirada como biblioteca JS frontend para tu pr\u00f3ximo proyecto de desarrollo web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/vue-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-12T06:25:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-23T09:36:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/08\/what-to-know-about-vue-js.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Solomon Eseme\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Explora 10 razones por las que deber\u00edas dar a Vue.js una segunda mirada como biblioteca JS frontend para tu pr\u00f3ximo proyecto de desarrollo web.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/08\/what-to-know-about-vue-js.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@kaperskyguru\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Solomon Eseme\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vue-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vue-js\/\"},\"author\":{\"name\":\"Solomon Eseme\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\"},\"headline\":\"10 cosas que debes saber sobre Vue.js Frontend Framework\",\"datePublished\":\"2021-08-12T06:25:03+00:00\",\"dateModified\":\"2023-08-23T09:36:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vue-js\/\"},\"wordCount\":2635,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vue-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/08\/what-to-know-about-vue-js.jpeg\",\"keywords\":[\"JavaScript Framework\",\"vue.js\"],\"articleSection\":[\"Sin Categor\u00eda\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/vue-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vue-js\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/vue-js\/\",\"name\":\"10 cosas que debes saber sobre Vue.js Frontend Framework\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vue-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vue-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/08\/what-to-know-about-vue-js.jpeg\",\"datePublished\":\"2021-08-12T06:25:03+00:00\",\"dateModified\":\"2023-08-23T09:36:16+00:00\",\"description\":\"Explora 10 razones por las que deber\u00edas dar a Vue.js una segunda mirada como biblioteca JS frontend para tu pr\u00f3ximo proyecto de desarrollo web.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vue-js\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/vue-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vue-js\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/08\/what-to-know-about-vue-js.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/08\/what-to-know-about-vue-js.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"10 cosas que debes saber sobre Vue.js Frontend Framework\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vue-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue.js\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/vue-js\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"10 cosas que debes saber sobre Vue.js Frontend Framework\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\",\"name\":\"Solomon Eseme\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"caption\":\"Solomon Eseme\"},\"description\":\"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me\",\"sameAs\":[\"https:\/\/masteringbackend.com\",\"https:\/\/linkedin.com\/in\/solomoneseme\",\"https:\/\/x.com\/kaperskyguru\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/solomoneseme\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 cosas que debes saber sobre Vue.js Frontend Framework","description":"Explora 10 razones por las que deber\u00edas dar a Vue.js una segunda mirada como biblioteca JS frontend para tu pr\u00f3ximo proyecto de desarrollo web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/vue-js\/","og_locale":"es_ES","og_type":"article","og_title":"10 cosas que debes saber sobre Vue.js Frontend Framework","og_description":"Explora 10 razones por las que deber\u00edas dar a Vue.js una segunda mirada como biblioteca JS frontend para tu pr\u00f3ximo proyecto de desarrollo web.","og_url":"https:\/\/kinsta.com\/es\/blog\/vue-js\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2021-08-12T06:25:03+00:00","article_modified_time":"2023-08-23T09:36:16+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/08\/what-to-know-about-vue-js.jpeg","type":"image\/jpeg"}],"author":"Solomon Eseme","twitter_card":"summary_large_image","twitter_description":"Explora 10 razones por las que deber\u00edas dar a Vue.js una segunda mirada como biblioteca JS frontend para tu pr\u00f3ximo proyecto de desarrollo web.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/08\/what-to-know-about-vue-js.jpeg","twitter_creator":"@kaperskyguru","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Solomon Eseme","Tiempo de lectura":"13 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/vue-js\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/vue-js\/"},"author":{"name":"Solomon Eseme","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2"},"headline":"10 cosas que debes saber sobre Vue.js Frontend Framework","datePublished":"2021-08-12T06:25:03+00:00","dateModified":"2023-08-23T09:36:16+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/vue-js\/"},"wordCount":2635,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/08\/what-to-know-about-vue-js.jpeg","keywords":["JavaScript Framework","vue.js"],"articleSection":["Sin Categor\u00eda"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/vue-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/vue-js\/","url":"https:\/\/kinsta.com\/es\/blog\/vue-js\/","name":"10 cosas que debes saber sobre Vue.js Frontend Framework","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/vue-js\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/08\/what-to-know-about-vue-js.jpeg","datePublished":"2021-08-12T06:25:03+00:00","dateModified":"2023-08-23T09:36:16+00:00","description":"Explora 10 razones por las que deber\u00edas dar a Vue.js una segunda mirada como biblioteca JS frontend para tu pr\u00f3ximo proyecto de desarrollo web.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/vue-js\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/vue-js\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/vue-js\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/08\/what-to-know-about-vue-js.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/08\/what-to-know-about-vue-js.jpeg","width":1460,"height":730,"caption":"10 cosas que debes saber sobre Vue.js Frontend Framework"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/vue-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Vue.js","item":"https:\/\/kinsta.com\/es\/secciones\/vue-js\/"},{"@type":"ListItem","position":3,"name":"10 cosas que debes saber sobre Vue.js Frontend Framework"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2","name":"Solomon Eseme","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","caption":"Solomon Eseme"},"description":"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me","sameAs":["https:\/\/masteringbackend.com","https:\/\/linkedin.com\/in\/solomoneseme","https:\/\/x.com\/kaperskyguru"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/solomoneseme\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/42878","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/193"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=42878"}],"version-history":[{"count":11,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/42878\/revisions"}],"predecessor-version":[{"id":52145,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/42878\/revisions\/52145"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42878\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42878\/translations\/it"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42878\/translations\/de"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42878\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42878\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42878\/translations\/fr"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42878\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42878\/translations\/se"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42878\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/42880"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=42878"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=42878"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=42878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}