Tema clave en Vuejs

🚀 Parte 1: Temas Clave Vue 3

• Composition API: La forma moderna de escribir Vue usando <script setup>. Todo el código de una misma función va junto.

• Lifecycle Hooks: Funciones que se ejecutan en momentos clave. El más usado: onMounted (cuando el componente aparece en pantalla, ideal para cargar datos).

• Pinia: El almacén central. Guarda los datos que toda la aplicación necesita ver (ej. el usuario logueado).

• Props: Datos que el padre le manda al hijo (hacia abajo).

• Emit: Eventos que el hijo le manda al padre para avisarle algo (hacia arriba).

• v-if: Oculta un elemento borrándolo del mapa.

• v-show: Oculta un elemento pero solo con CSS (display: none).

• v-for: Para hacer listas (como un forEach). Siempre lleva :key.

• v-model: Conecta un input con una variable. Si uno cambia, el otro también.

❓ Parte 2: Preguntas de Entrevista (Respuestas Cortas)

1. ¿Diferencia entre ref y reactive?

• ref() sirve para cualquier dato (usa .value).

• reactive() solo para objetos y arrays (no usa .value).

• Respuesta rápida: Usa siempre ref por seguridad.

2. ¿Cuándo usar computed y watch?

• computed: Para calcular un dato nuevo basado en otro (tiene memoria/caché).

• watch: Para ejecutar una acción (como llamar a una API) cuando un dato cambia.

3. ¿Ventaja de Composition API?

• Permite ordenar el código por funciones y reutilizarlo mucho más fácil que antes.

4. ¿Cómo funciona v-model por detrás?

• Es la unión automática de una prop (el valor) y un evento (cuando cambia).

5. ¿Cómo compartir datos entre componentes?

• Cerca: Props (hacia abajo) y Emits (hacia arriba).

• Lejos / Toda la app: Pinia.

6. ¿Qué es Pinia?

• Una caja central para guardar datos globales de la app y evitar pasar props de componente en componente.

🚀 Parte 3: Nuevos Temas Clave

• Vuex: El antecesor de Pinia. Es el sistema antiguo de manejo de estado global para Vue 2. Si te toca mantener un proyecto viejo, usarás Vuex; si el proyecto es moderno, usarás Pinia.

• Interfaces Modernas (UI): Se refiere a crear componentes visuales que sean limpios, minimalistas, interactivos y adaptables a móviles (responsive), priorizando siempre la experiencia de usuario (UX).

• Optimizar Rendimiento: Hacer que la app cargue y funcione más rápido. En Vue se logra con Lazy Loading (cargar componentes o rutas solo cuando se necesitan) y usando bien v-if / v-show.

• Quasar Framework: Es un framework basado en Vue que te permite escribir el código una sola vez y exportarlo como web (SPA/SSR), app móvil (Android/iOS) o app de escritorio, usando un catálogo gigante de componentes visuales ya listos.

❓ Parte 4: Nuevas Preguntas de Entrevista

1. ¿Qué diferencia hay entre Vuex y Pinia?

• Vuex es más complejo, usa mutaciones y requiere más código (boilerplate).

• Pinia es más simple, no usa mutaciones (cambias el estado directamente) y tiene soporte nativo para TypeScript.

2. ¿Cómo optimizas el rendimiento de una app en Vue?

• Cargando las rutas con Lazy Loading (importación dinámica).

• Usando :key obligatoriamente en todos los v-for.

• Usando v-show en lugar de v-if si el componente aparece y desaparece constantemente.

3. ¿Qué ventajas tiene usar Quasar?

• Multiplataforma: Creas web, móvil y escritorio desde el mismo código.

• Velocidad: Viene con componentes UI modernos listos para usar, lo que ahorra meses de desarrollo.

4. ¿A qué te refieres con crear una Interfaz Moderna en Vue?

• A diseñar componentes modulares, con carga visual ligera, animaciones fluidas y un diseño adaptable (responsive) que responda al instante a las acciones del usuario.