Las entrevistas de Vue se enfocan en el sistema de reactividad, la Composition API, y la comunicación entre componentes. Aquí están las preguntas más comunes con respuestas modelo.
Cada pregunta viene con una respuesta modelo con la que puedes comparar la tuya.
1
¿Cuál es la diferencia entre ref y reactive? ¿Cuándo usas cada uno?
Respuesta
ref envuelve cualquier valor — incluyendo primitivos — en un objeto con una propiedad .value, mientras que reactive devuelve un Proxy y solo funciona para objetos. ref sobrevive el destructuring y la reasignación, que reactive no: destructurar un objeto reactive produce valores planos que pierden reactividad. La guía común es usar ref por defecto y recurrir a reactive solo para un grupo de campos estrechamente relacionados.
2
¿Cómo funciona la reactividad en Vue 3? ¿Qué está haciendo Proxy por debajo?
Respuesta
Vue 3 envuelve el estado en un Proxy que intercepta las lecturas de propiedad para rastrear qué efectos dependen de ellas y las escrituras de propiedad para disparar esos efectos. A diferencia del Object.defineProperty de Vue 2, un Proxy ve la adición y eliminación de propiedades y funciona con arrays y Map, así que Vue.set ya no se necesita. El trade-off es que Proxy requiere navegadores modernos y que la reactividad se pierde en el momento en que destructuras fuera del proxy.
3
Explica la diferencia entre computed y watch.
Respuesta
computed deriva un valor de otro estado reactivo, lo cachea, y recalcula solo cuando una dependencia cambia — úsalo siempre que el resultado sea un valor que renderizas. watch corre un efecto secundario en respuesta a un cambio: obtener datos, escribir a storage, disparar una animación. Si te encuentras asignando a una variable dentro de un watcher, un computed casi siempre es la mejor respuesta.
4
Nombra los lifecycle hooks en Vue 3.
Respuesta
En la Composition API son onBeforeMount y onMounted, onBeforeUpdate y onUpdated, onBeforeUnmount y onUnmounted, más onErrorCaptured, onActivated y onDeactivated para componentes cacheados. setup() en sí reemplaza beforeCreate y created. onMounted es donde pertenece el acceso al DOM y las suscripciones, y onUnmounted es donde debes desmontarlas.
5
¿Qué son los slots? Da un ejemplo de un scoped slot.
Respuesta
Un slot es un placeholder en un template hijo que el padre llena con su propio markup, lo que hace reutilizables a los componentes wrapper. Un scoped slot además pasa datos de vuelta hacia arriba del hijo al contenido del slot — por ejemplo un componente de lista que maneja el fetching y el loop mientras deja al padre decidir cómo renderizar cada item. Eso invierte el control: el hijo posee el comportamiento y el padre posee la presentación.
6
¿Cómo pasas datos de un componente hijo a su padre?
Respuesta
El hijo declara eventos con defineEmits y llama a emit con un payload, y el padre escucha con v-on. Para binding bidireccional en un solo valor, v-model es azúcar sobre una prop más un evento de update. Mutar una prop directamente no está permitido porque rompe el flujo de datos unidireccional que hace rastreables los cambios de estado.
7
¿Qué es Pinia y por qué se prefiere sobre Vuex?
Respuesta
Pinia es la librería de estado oficial para Vue 3: los stores son funciones planas con state, getters, y actions, y no hay mutations. Infiere tipos de TypeScript sin anotación manual, soporta stores modulares por defecto en vez de módulos anidados, y funciona con las APIs Options y Composition. El resultado es menos boilerplate y mucho mejor soporte de editor que Vuex.
8
¿Cuál es la diferencia entre v-if y v-show?
Respuesta
v-if agrega o remueve el elemento del DOM, así que cuesta un montaje y desmontaje pero evita renderizar nada cuando es false — correcto para contenido que raramente cambia o es costoso. v-show siempre renderiza el elemento y alterna el display CSS, así que cambiar es barato pero el componente siempre está construido. Usa v-show para algo que se alterna frecuentemente, como un dropdown.