Vue para Oposiciones TAI: Guía Completa

¿Qué es Vue?

Vue.js es un framework progresivo de JavaScript utilizado para desarrollar interfaces de usuario (UI) y aplicaciones web de una sola página (SPA - Single Page Application).

Se caracteriza por su facilidad de aprendizaje, su excelente rendimiento y su arquitectura basada en componentes reutilizables.

Vue permite crear aplicaciones complejas de forma modular, manteniendo el código organizado y fácil de mantener.

Conceptos fundamentales

Para comprender Vue es imprescindible conocer los siguientes conceptos:

• Componente: unidad reutilizable de la interfaz.
• Reactive Data: actualización automática de la interfaz cuando cambian los datos.
• Template: estructura HTML del componente.
• Directivas: instrucciones especiales que amplían el HTML.
• DOM Virtual (Virtual DOM): mecanismo que optimiza las actualizaciones de la interfaz.

Funcionamiento de Vue

Cuando un usuario interactúa con una aplicación Vue:

Usuario

↓

Evento

↓

Datos (Reactive State)

↓

Vue detecta el cambio

↓

Virtual DOM

↓

DOM real actualizado

Vue detecta automáticamente los cambios en los datos reactivos y actualiza únicamente los elementos del DOM que han cambiado.

Características de Vue

Vue presenta las siguientes características:

• Framework progresivo.
• Basado en componentes.
• Reactividad automática.
• Virtual DOM.
• Alto rendimiento.
• Fácil integración con otros proyectos.
• Ecosistema completo para SPA.

Componentes

Los componentes son la unidad básica de desarrollo en Vue.

Cada componente encapsula:

• Estructura (Template).
• Lógica (Script).
• Estilos (Style).

Ejemplo simplificado:

<template>
  <h2>{{ mensaje }}</h2>
</template>

<script setup>
const mensaje = 'Hola Vue'
</script>

<style>
h2 {
  color: blue;
}
</style>

Reactividad

La reactividad es una de las principales características de Vue.

Cuando cambia una variable reactiva:

• Vue detecta el cambio.
• Actualiza el Virtual DOM.
• Modifica únicamente los elementos necesarios del DOM real.

Esto evita recargar toda la página.

Directivas

Las directivas son atributos especiales que añaden comportamiento dinámico al HTML.

Algunas de las más utilizadas son:

Ejemplo:

<input v-model="nombre">
<button @click="guardar">Guardar</button>
<p v-if="nombre">Hola {{ nombre }}</p>

Ciclo de vida de un componente

Los componentes de Vue atraviesan distintas fases durante su ejecución.

Las principales son:

Vue Router

Vue Router es la librería oficial para gestionar la navegación entre páginas en aplicaciones SPA.

Permite:

• Navegación sin recargar la página.
• Rutas dinámicas.
• Parámetros en la URL.
• Protección de rutas.

Pinia

Pinia es la solución oficial para gestionar el estado global de una aplicación Vue.

Permite compartir información entre componentes sin necesidad de pasar datos manualmente.

Ejemplos de datos compartidos:

• Usuario autenticado.
• Carrito de compra.
• Configuración.
• Tema visual.

Comparación Vue vs React vs Angular

Caso práctico

Situación

Una empresa necesita desarrollar un panel de administración donde los datos cambian constantemente sin recargar la página.

Solución

Vue resulta una buena elección porque:

• Actualiza automáticamente la interfaz.
• Utiliza componentes reutilizables.
• Facilita el mantenimiento.
• Ofrece un excelente rendimiento mediante el Virtual DOM.

Ventajas e inconvenientes

Ventajas

• Curva de aprendizaje reducida.
• Excelente documentación.
• Alto rendimiento.
• Arquitectura modular.
• Gran comunidad.
• Fácil integración.

Inconvenientes

• Ecosistema empresarial menor que Angular.
• Menor demanda laboral que React en algunos mercados.
• Algunas librerías de terceros son menos numerosas.

Errores habituales

• Confundir Vue con un lenguaje de programación.
• Pensar que Vue sustituye a JavaScript.
• No comprender el funcionamiento de la reactividad.
• Confundir componentes con páginas completas.
• Creer que Vue Router forma parte del navegador.

Cómo evitarlos

• Recordar que Vue es un framework de JavaScript.
• Practicar la creación de componentes.
• Entender el flujo de datos reactivos.
• Diferenciar Vue Router del sistema de rutas HTTP.

Relaciones con otros temas

Vue está directamente relacionado con:

• JavaScript.
• HTML.
• CSS.
• Componentes Web.
• SPA (Single Page Applications).
• Virtual DOM.
• APIs REST.
• Node.js.
• Vite.

Conceptos clave para recordar

[!NOTE]

• Vue es un framework progresivo de JavaScript.
• Está orientado al desarrollo de interfaces de usuario y SPA.
• Utiliza una arquitectura basada en componentes reutilizables.
• Implementa un sistema de reactividad automática.
• Emplea un Virtual DOM para optimizar el rendimiento.
• Las directivas más utilizadas son v-if, v-for, v-model, v-bind y v-on.
• Vue Router gestiona la navegación entre vistas.
• Pinia es el gestor de estado recomendado en Vue 3.
• Vue destaca por su facilidad de aprendizaje, modularidad y rendimiento.