🚀 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
refpor 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
:keyobligatoriamente en todos losv-for.Usando
v-showen lugar dev-ifsi 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.
