Vue 3 — Entrevista
Fuente: Guía de estudio Laravel+Vue (proyecto Supermercado DDD)
vuefrontendjavascript
Tarjetas
¿computed vs method?
`computed` deriva valor del estado, tiene cache. `method` es acción/evento, sin cache.
¿Qué es un composable?
Función que retorna estado y lógica reutilizable. Extrae lógica del componente sin repetirla.
¿Cómo el hijo le habla al padre?
Emits. `defineEmits(['evento'])` en el hijo, `@evento="handler"` en el padre.
¿Cuándo usas watch?
Para side effects cuando algo cambia (animaciones, API calls, localStorage). No para derivar valores.
¿Qué es la reactividad en Vue?
Vue intercepta el acceso a variables reactivas. Cuando cambian, re-renderiza las partes del DOM que dependen de ellas.
¿Cómo compartes estado global sin Pinia?
Composable con estado externo (patrón singleton). El estado se declara fuera de la función.
¿Para qué sirven los slots?
Composición. El hijo define la estructura, el padre inyecta el contenido.
¿Qué hace v-model?
Two-way binding. Es azúcar para `:value="x" @input="x = $event.target.value"`.
¿Por qué v-for necesita :key?
Para que Vue rastree elementos al reordenar/agregar/eliminar. Debe ser único y estable (ID, no índice).
¿Transition vs TransitionGroup?
`Transition` = un elemento (show/hide). `TransitionGroup` = lista de elementos (v-for), con animación de reordenamiento.
¿Qué hook usas para limpiar listeners?
`onUnmounted` (Composition API). Ahí quitas event listeners y cancelas timers.
¿Para qué sirve Teleport?
Renderiza el HTML en otro punto del DOM (body). Útil para modals y toasts que no deben quedar limitados por overflow/z-index del padre.
¿Props hacia dónde van?
Padre → Hijo (hacia abajo). El hijo no puede mutar sus props.
¿v-if vs v-show?
`v-if` quita el elemento del DOM. `v-show` usa `display: none`. v-if más costoso al inicio, v-show al toggle.
¿Cuándo conviene la Composition API sobre la Options API?
Cuando el componente tiene mucha lógica que quieres agrupar por feature o extraer a composables. Para componentes chicos, la Options API sigue siendo perfectamente válida.
¿watch vs watchEffect?
`watch` observa fuentes declaradas explícitamente y recibe valor nuevo y viejo. `watchEffect` corre de inmediato y autodetecta dependencias, pero no ve el valor anterior.
¿Qué problema de props resuelve provide/inject?
El props drilling: deja de pasar datos por componentes intermedios que no los usan. Un ancestro hace `provide` y cualquier descendiente lejano hace `inject`.
¿Qué es un scoped slot?
Un slot donde el hijo expone datos hacia el contenido: el padre recibe esas variables y decide cómo renderizarlas (por ejemplo, cada ítem de una lista).
¿Dónde no llega la reactividad de Vue 3?
Al destructurar un `reactive` (obtienes el valor crudo, sin Proxy) y a todo dato no envuelto en ref/reactive: se intercepta el acceso a propiedades, no variables sueltas.
¿Cuándo elegirías shallowRef?
Con estructuras grandes o de terceros (árboles de datos, instancias de canvas) donde solo quieres re-disparar al reemplazar `.value` completo, sin trackear mutaciones internas.
¿Qué pasa si llamas onMounted después de un await en setup?
El hook no se registra: tras el await se perdió la instancia activa. Todos los composables deben correr de forma sincrónica antes del primer await.
¿Un fetch va en setup directo o en onMounted?
Si no tocas el DOM, directo en setup (arranca antes y habilita async setup con Suspense). onMounted es para cuando necesitas elementos ya renderizados: medir, inicializar librerías visuales.
¿Qué resuelve Suspense?
Mostrar un fallback mientras componentes asíncronos (con async setup) resuelven, en lugar de administrar un isLoading en cada uno.
¿Qué simplifica defineModel?
Declarar un v-model en un componente propio: una sola macro expone la prop y el emit, sin escribir `modelValue` + `update:modelValue` a mano.
¿Para qué sirve defineAsyncComponent?
Cargar un componente recién cuando va a renderizarse, con placeholders de loading y error integrados: code-splitting a nivel componente.
¿Qué te da KeepAlive?
Cachea la instancia de un componente dinámico: al volver a él conserva estado y DOM (form, scroll) sin re-ejecutar setup.
¿Dónde validas autenticación en Vue Router?
En guards: `beforeEach` global para auth de toda la app, `beforeEnter` para una ruta puntual. Corren antes de confirmar la navegación y pueden redirigir.
¿Por qué cargar rutas con import() dinámico?
Lazy loading: cada vista se descarga al visitarla por primera vez, reduciendo el bundle inicial y el tiempo de primera carga.
¿Dónde va la lógica asíncrona en Pinia?
En los actions: pueden ser async, llamar APIs y modificar state. Los getters son derivados síncronos cacheados — nunca fetch ahí.
¿Qué es la hidratación en SSR?
El server envía HTML ya renderizado y visible; el cliente hidrata: adjunta listeners y estado reactivo sobre ese mismo HTML sin re-renderizar desde cero.
¿Para qué existe markRaw?
Para excluir un objeto del sistema reactivo: clases de librerías (charts, mapas, three.js) que no necesitan tracking y pueden romperse al envolverlas en un Proxy.
¿Pinia vs Vuex?
Pinia: stores independientes, sin mutations, TypeScript de primera y usable fuera de componentes. Vuex: un único store global con mutations obligatorias, el estándar de Vue 2.
¿Qué optimiza el compilador de Vue que JSX no puede?
El template es analizable en compile time: hoisting del contenido estático, marcado de bloques dinámicos y patch de solo lo que cambió, sin diffear el árbol completo.
¿Por qué los composables empiezan con use?
Es una convención: le indica a humanos, linters y tooling que la función usa APIs reactivas de Vue y debe ejecutarse en el contexto sincrónico de setup.
¿ref vs reactive?
`ref` envuelve un valor, necesita `.value`. `reactive` hace reactivo un objeto, sin `.value`, pero pierde reactividad al desestructurar.