¿Qué es Vue.js?

¿Qué es Vue.js?

Vue.js es un framework de JavaScript de código abierto para crear interfaces de usuario. Se apoya en HTML, CSS y JavaScript estándar y ofrece un modelo declarativo basado en componentes: describes cómo debe verse la página para un estado dado y Vue actualiza el DOM cuando ese estado cambia. La versión mayor actual es Vue 3.

Cómo funciona Vue

Vue amplía HTML con una sintaxis de plantillas y sigue el estado reactivo que lee tu plantilla. Cuando un valor cambia, vuelve a renderizar solo lo que depende de él. Los componentes suelen escribirse como componentes de archivo único (archivos .vue) con lógica, plantilla y estilos juntos.

API de opciones y API de composición

• API de opciones: la lógica se agrupa en opciones como data, methods y mounted. Es más sencilla para empezar.
• API de composición: el estado y las funciones se declaran directamente, normalmente con <script setup>. Es más libre y encaja con aplicaciones completas.

Ambas funcionan sobre el mismo sistema. La documentación de Vue recomienda la API de composición con componentes de archivo único para aplicaciones completas.

Dónde se usa Vue

Vue se define como un framework progresivo: se puede adoptar paso a paso, desde mejorar HTML estático sin compilación hasta una aplicación de página única (SPA) con Vite, o renderizado en el servidor (SSR) con hidratación en el navegador, donde Nuxt es el meta-framework habitual.

Vue 2 ha llegado al final de su vida útil

Según vuejs.org, Vue 2 llegó al final de su vida útil el 31 de diciembre de 2023. Los proyectos nuevos deben usar Vue 3.

Errores frecuentes

• Modificar una prop dentro del componente hijo en lugar de emitir un evento al padre.
• Olvidar .value en una ref dentro de <script setup>.
• Publicar una SPA solo de cliente e ignorar la primera carga: un paquete de JavaScript grande retrasa lo que ve el usuario.

Vue y las pruebas de rendimiento

Una prueba de carga envía tráfico a tus servidores y APIs, pero no ejecuta tu código Vue. Para medir el renderizado en un navegador real usa el verificador de Core Web Vitals gratuito o la monitorización de velocidad de página. Más en nuestras guías (en inglés) sobre rendimiento de JavaScript y pruebas de rendimiento frontend.

Preguntas frecuentes

¿Vue.js es un framework o una biblioteca?

La documentación de Vue lo llama framework. El núcleo se centra en la capa de vista y el enrutado y la gestión de estado vienen de bibliotecas complementarias.

¿Sigue Vue 2 con soporte?

No. Vue 2 llegó al final de su vida útil el 31 de diciembre de 2023.

¿API de opciones o de composición?

Ambas sirven. Para aplicaciones completas se recomienda la API de composición con componentes de archivo único.