Simulador Técnico de Vue.js

Q: Cuántas preguntas tiene el simulado de Vue.js?

Tiene 30 preguntas en total: 10 de nivel Principiante, 10 de Intermedio y 10 de Avanzado, barajadas en cada intento.

Q: El simulado está enfocado en Vue 2 o Vue 3?

Está enfocado 100% en Vue 3 moderno, con especial énfasis en Composition API, TypeScript y estándares actuales.

Q: Es necesario registrarse o pagar?

No. Todos los simulados de ToolNotch son 100% gratuitos y se ejecutan directamente en tu navegador sin registro.

Question 1

En Vue 3, ¿qué hace `createApp(App).mount('#app')`?

Accepted Answer

Crea una nueva instancia aislada de aplicación a partir del componente raíz y la monta en el elemento del DOM que coincide con el selector

Answer

Descarga el runtime de Vue desde un CDN y lo inyecta en la página

Answer

Compila todos los archivos `.vue` del proyecto en un único bundle

Answer

Registra `App` como un componente global disponible en cualquier otro componente

Question 2

¿Qué renderiza `{{ message }}` dentro de una plantilla de Vue?

Accepted Answer

El valor actual de la propiedad reactiva `message`, re-renderizado automáticamente cuando cambia

Answer

La cadena literal "message"

Answer

Una referencia al nodo del DOM, no su valor

Answer

Solo se renderiza una vez al montar y nunca se actualiza

Question 3

¿Cuál es la sintaxis abreviada para `v-bind:href="url"`?

Accepted Answer

`:href="url"`

Answer

`@href="url"`

Answer

`#href="url"`

Answer

`.href="url"`

Question 4

¿Cuál es la principal diferencia de comportamiento entre `v-if` y `v-show`?

Accepted Answer

`v-show` monta y desmonta nodos del DOM físicamente; `v-if` renderiza el nodo y alterna el CSS `display: none`

Answer

`v-if` monta y desmonta nodos del DOM físicamente; `v-show` renderiza el nodo y alterna el CSS `display: none`

Answer

`v-if` opera únicamente sobre inputs de formularios; `v-show` opera solo sobre componentes personalizados

Answer

Ambas directivas generan el mismo código en DOM, siendo `v-show` un simple atajo sintáctico de `v-if`

Question 5

¿Por qué Vue requiere (o recomienda fuertemente) un enlace `:key` en elementos renderizados con `v-for`?

Accepted Answer

Proporciona una identidad estable para que Vue rastree, reordene y reutilice nodos DOM en el diffing

Answer

`:key` es puramente cosmético y solo afecta al valor devuelto por `element.dataset.key`

Answer

Solo se requiere para elementos `<template>`, nunca para etiquetas HTML normales

Answer

`:key` mejora el rendimiento de red almacenando en caché la respuesta de API para ese elemento

Question 6

¿Qué hace `ref()` en la Composition API de Vue 3 y por qué se debe acceder a su valor mediante `.value` dentro de `<script setup>`?

Accepted Answer

Encapsula el valor en un objeto reactivo con getter/setter en `.value`, permitiendo rastrear primitivos con Proxy

Answer

Crea una referencia directa a elementos del DOM real, usando `.value` para leer el valor nativo del HTML

Answer

Instancia una copia inmutable de estado donde `.value` devuelve clones profundos para evitar mutaciones directas

Answer

Envuelve el dato en una Promise donde `.value` actúa como desempaquetador de tipos exigido por TypeScript

Question 7

¿Cuál es la principal ventaja de una propiedad `computed` sobre llamar a un método normal en la plantilla?

Accepted Answer

Propiedades computadas almacenan resultado en caché reactivo, recalculando solo cuando sus dependencias cambian

Answer

Métodos almacenan retorno en caché; propiedades computadas recalculan en cada ciclo de renderizado del componente

Answer

Propiedades computadas ejecutan en Web Workers asíncronos; métodos comunes corren en el hilo principal del browser

Answer

No hay diferencia — métodos en template y propiedades computadas poseen rendimiento y ciclo de vida idénticos

Question 8

¿Cómo se declara que un componente hijo acepta una prop obligatoria `title` de tipo `String` usando `<script setup>`?

Accepted Answer

`defineProps({ title: { type: String, required: true } })`

Answer

`const props = ref({ title: String })`

Answer

`export const title = String`

Answer

`this.props.title = String`

Question 9

En un componente hijo con `<script setup>`, ¿cuál es la forma correcta de notificar al padre que ocurrió un evento "submit", pasando opcionalmente un payload?

Accepted Answer

const emit = defineEmits(['submit']); emit('submit', payload)

Answer

`this.$parent.onSubmit(payload)`

Answer

`window.dispatchEvent(new CustomEvent('submit', payload))`

Answer

`props.onSubmit(payload)`

Question 10

¿Cuáles son los tres bloques de nivel superior que componen un Single-File Component estándar de Vue (archivo `.vue`)?

Accepted Answer

`<template>`, `<script>`, `<style>`

Answer

`<head>`, `<body>`, `<footer>`

Answer

`<html>`, `<js>`, `<css>`

Answer

`<render>`, `<data>`, `<methods>`

Question 11

¿Cuál es la principal diferencia práctica entre `ref({ count: 0 })` y `reactive({ count: 0 })`, y por qué importa reemplazar el objeto completo?

Accepted Answer

`reactive()` devuelve un Proxy que pierde reactividad si se reasigna; `ref()` admite reasignación en `.value`

Answer

`ref()` es exclusivo para objetos y arrays; `reactive()` es obligatorio para números, strings y booleanos

Answer

`ref()` realiza rastreo profundo de dependencias; `reactive()` es superficial y vigila solo claves principales

Answer

`ref()` opera solo dentro de Options API; `reactive()` está restringido exclusivamente a `<script setup>`

Question 12

¿Cuándo deberías recurrir a `watch()` en lugar de una propiedad `computed`?

Accepted Answer

Cuando se requiere ejecutar un efecto secundario (APIs, DOM, logs) en respuesta a cambios de estado

Answer

Siempre se debe preferir `watch` — `computed` es una API heredada de Vue 2

Answer

Son intercambiables en todos los casos sin diferencia significativa

Answer

Se requiere `watch` siempre que haya más de una dependencia reactiva involucrada

Question 13

¿Cómo decide `watchEffect(fn)` qué fuentes reactivas rastrear, en comparación con `watch(source, fn)`?

Accepted Answer

Rastrea automáticamente todas las propiedades leídas de forma síncrona en el callback, sin requerir array de dependencias

Answer

Exige pasar un array explícito de dependencias reactivas, exactamente igual al hook `useEffect` de la librería React

Answer

Nunca vuelve a ejecutarse tras el montaje inicial — corre una sola vez en el ciclo de vida y luego se desconecta

Answer

Rastrea estrictamente variables creadas con `ref()`, ignorando cambios hechos en objetos envueltos en `reactive()`

Question 14

¿Cuál es la diferencia estructural central entre la Options API y la Composition API en Vue 3?

Accepted Answer

Options API organiza código por tipo de opción (data, methods); Composition API agrupa por funcionalidad con composables

Answer

Options API tiene mayor rendimiento en runtime; Composition API compila bundles de JavaScript mayores en producción

Answer

Options API fue descontinuada en Vue 3 y genera errores salvo que se active el modo compatibilidad de migración

Answer

Options API permite compartir estado entre pantallas; Composition API restringe el estado al alcance de un componente

Question 15

¿Qué problema resuelve `provide()`/`inject()` que las props normales no pueden resolver limpiamente?

Accepted Answer

Transmite datos y métodos de un ancestro a descendientes profundos sin necesidad de prop drilling en intermediarios

Answer

Sustituye a Pinia en toda la aplicación sincronizando estado entre componentes hermanos sin requerir ancestro común

Answer

Permite que componentes hijos modifiquen el estado de padres directamente sin emitir eventos ni usar hooks reactivos

Answer

Funciona estrictamente entre un componente y sus hijos directos, forzando validación de tipos TypeScript en runtime

Question 16

¿Cuál es la diferencia entre un slot predeterminado (default) y un slot nombrado (named slot) en un componente Vue?

Accepted Answer

El slot por defecto recibe contenido no dirigido, mientras que slots nombrados crean puntos de inyección vía <template #nombre>

Answer

No hay diferencia — los slots con nombre son solo sintaxis alternativa sin cambio de comportamiento

Answer

Los slots nombrados solo pueden pasar texto estático, nunca contenido reactivo dinámico

Answer

Un componente solo puede tener un slot en total — predeterminado o nombrado, nunca ambos

Question 17

En la Composition API, ¿qué hook se ejecuta después de montar el componente cuando sus elementos DOM son accesibles, siendo el lugar ideal para inicializar bibliotecas DOM de terceros?

Accepted Answer

`onMounted`

Answer

`onBeforeMount`

Answer

`onCreated`

Answer

`onUpdated`

Question 18

¿Qué debe hacer un componente internamente para soportar el enlace `v-model` de su componente padre (ej.: `<CustomInput v-model="text" />`)?

Accepted Answer

Aceptar la prop modelValue y emitir el evento update:modelValue cuando el valor cambie

Answer

Nada — `v-model` funciona automáticamente en cualquier componente sin configuración

Answer

Importar un composable especial `useVModel()` de Vue Router

Answer

Declarar el componente con `defineModel: true` en sus opciones

Question 19

¿Qué problema resuelve el componente nativo `<Teleport>`?

Accepted Answer

Renderiza el marcado en otro nodo del DOM físico manteniendo el alcance reactivo y la jerarquía lógica del componente

Answer

Carga bundles de scripts de componentes bajo demanda en cuanto entran en el área visible del viewport del navegador

Answer

Coordina la reconciliación de hidratación en SSR entre el HTML generado en Node.js y el Virtual DOM del cliente

Answer

Provee animaciones de transición de ruta al navegar entre pantallas en aplicaciones web creadas con Vue Router

Question 20

¿Qué logra envolver un componente dinámico en `<KeepAlive>`?

Accepted Answer

Guarda instancias inactivas en caché de memoria sin destruirlas, preservando su estado al regresar a la vista

Answer

Mantiene componentes montados de forma permanente en el DOM real, alternando su visibilidad con `display: none`

Answer

Graba el estado reactivo en `localStorage` del navegador para conservarlo ante recargas de página y reinicios

Answer

Evita que componentes hijos se rendericen cuando el componente padre actualiza, funcionando como React.memo

Question 21

A nivel mecánico, ¿cómo detecta el sistema de reactividad de Vue 3 que un componente necesita re-renderizarse cuando cambia una propiedad reactiva?

Accepted Answer

Un proceso en el event loop compara snapshots JSON de los datos cada 16 milisegundos para detectar diferencias de estado

Answer

Traps get/set en Proxy registran effects activos en la lectura, reactivando renderizado solo en propiedades modificadas

Answer

Cada mutación dispara la cola de actualización del DOM del navegador de forma síncrona, saltándose el Virtual DOM

Answer

El compilador TypeScript transforma variables reactivas en instancias EventEmitter que emiten eventos globales

Question 22

¿Qué diferencia a un composable de Vue bien diseñado (ej.: `useMouse()`) de una simple función de utilidad?

Accepted Answer

Una función que usa primitivas de Composition API para encapsular y devolver lógica reactiva con estado

Answer

Los composables deben basarse en clases y usar el patrón `extends Composable`

Answer

Los composables solo pueden invocarse una vez por aplicación, como un singleton

Answer

Los composables siempre deben devolver una Promise, ya que representan operaciones asíncronas

Question 23

¿Qué coordina el componente nativo `<Suspense>` en Vue 3?

Accepted Answer

Muestra un fallback mientras dependencias asíncronas hijas se resuelven, montando el árbol final de forma atómica

Answer

Pausa el ciclo de vida de los componentes hasta que un evento explícito de clic o gesto del usuario autorice el montaje

Answer

Reemplaza a `<KeepAlive>` guardando instancias asíncronas en memoria para restauración instantánea en cambios de ruta

Answer

Ejecuta reintentos automáticos con retroceso exponencial si componentes asíncronos fallan al cargarse de la red

Question 24

¿Qué produce la llamada `h('div', { class: 'box' }, 'Hello')` y cuándo usarías `h()` en lugar de un `<template>`?

Accepted Answer

Devuelve un nodo de virtual DOM (VNode) para renderizado programático cuando la sintaxis de template no es suficiente

Answer

Inserta un elemento `

` concreto en el DOM del navegador de forma síncrona, devolviendo su referencia HTMLElement

Answer

Opera como un utilitario interno que ejecuta llamadas `history.pushState()` durante la navegación de Vue Router

Answer

Está restringido exclusivamente a archivos compilados con JSX/TSX, no pudiendo invocarse en código TypeScript estándar

Question 25

¿Para qué sirve una directiva personalizada en Vue y qué hook implementarías para ejecutar lógica inmediatamente después de insertar el elemento en el DOM?

Accepted Answer

Encapsulan lógica reutilizable de manipulación directa del DOM; `mounted(el, binding)` corre cuando el elemento entra al DOM

Answer

Sirven únicamente para añadir clases CSS dinámicas a elementos; `mounted` es el único hook disponible en la API

Answer

Directivas personalizadas fueron descontinuadas en Vue 2 y reemplazadas por hooks de Composition API en Vue 3

Answer

Se aplican exclusivamente a componentes personalizados de Vue y fallan si se declaran en etiquetas HTML nativas

Question 26

En Vue Router, ¿cuál es la diferencia entre una guardia global `beforeEach` y una guardia por ruta `beforeEnter`?

Accepted Answer

`beforeEach` corre globalmente en cada navegación; `beforeEnter` se dispara solo al entrar al registro de ruta puntual

Answer

`beforeEnter` ejecuta en todos los cambios globales de ruta; `beforeEach` corre solo en rutas específicas configuradas

Answer

`beforeEnter` corre en tiempo de compilación durante el code splitting; `beforeEach` ejecuta en el navegador en runtime

Answer

Ambos guards comparten el mismo alcance, siendo `beforeEnter` un alias descontinuado equivalente a `beforeEach`

Question 27

¿Cuál es la principal ventaja de las tiendas Pinia frente a compartir manualmente un objeto `reactive()` entre componentes como solución casera de gestión de estado?

Accepted Answer

Pinia ofrece soporte para devtools, instancias aisladas seguras para SSR por petición e inferencia TypeScript

Answer

Pinia es funcionalmente idéntico a un objeto reactivo compartido — solo una envoltura estética

Answer

Pinia solo puede almacenar valores primitivos, nunca objetos anidados o arrays

Answer

Pinia reemplaza completamente a Vue Router unificando rutas y estado

Question 28

¿Qué cambia `shallowRef()` en comparación con un `ref()` normal y cuándo vale la pena esa compensación?

Accepted Answer

Solo rastrea reactividad al reasignar .value, omitiendo la conversión profunda de propiedades anidadas

Answer

`shallowRef()` hace que el valor sea inmutable y lanza un error ante cualquier mutación

Answer

Es un sinónimo de `ref()` sin diferencia de comportamiento

Answer

Solo puede contener valores primitivos, nunca objetos

Question 29

¿Qué causa la advertencia de "hydration mismatch" en una aplicación Vue renderizada en el servidor y por qué es peligroso ignorarla?

Accepted Answer

El Virtual DOM generado en cliente difiere del HTML creado por el servidor, forzando a Vue a descartar HTML y rehacer el DOM

Answer

Representa una advertencia inofensiva de CSS en desarrollo, sin consecuencias sobre eventos o datos en producción

Answer

Indica que Vue Router falló al encontrar una ruta correspondiente a la URL de la petición en la tabla de rutas cliente

Answer

Ocurre exclusivamente cuando stores de Pinia fallan al serializar su estado en etiquetas script durante el proceso de SSR

Question 30

¿Qué son las "patch flags" en la salida compilada de Vue 3 y cómo aceleran el re-renderizado respecto al diffing de virtual DOM de Vue 2?

Accepted Answer

Bitmasks numéricas generadas por el compilador en VNodes dinámicos, guiando el diff a inspeccionar solo bindings mutables

Answer

Clases CSS especiales inyectadas en nodos dinámicos para activar aceleración por hardware en GPU durante transiciones

Answer

Etiquetas de checksum criptográfico que validan si los bundles del cliente coinciden con los artefactos de servidor

Answer

Punteros de memoria en runtime que conectan nodos del Virtual DOM directamente a estructuras de layout en C++ de browser

Vue.js Interview Quiz

Qué cubre el cuestionario de entrevista de Vue.js

Niveles de dificultad

Temas del banco de preguntas

Cómo aprovechar el simulado de Vue.js

Preguntas frecuentes sobre el simulado de Vue.js

TypeScript

Node.js Fundamentals

System Architecture