¿Cuándo usarías `nextTick`, template refs y hooks de ciclo de vida para coordinarte con el DOM?

Respuesta

• Usa nextTick solo cuando necesites garantizar que el DOM ya refleja el último cambio reactivo antes de medir, enfocar o integrar otra librería.
• Las template refs son buenas para elementos concretos o componentes hijos, no como sustituto general del flujo declarativo.
• Combina onMounted, onUpdated, onActivated y onDeactivated según si el componente se crea, se actualiza o se conserva con keep-alive.

Puntos clave

• computed debe ser puro y servir para derivar; cuando introduces efectos laterales ahí, el modelo mental deja de ser fiable.
• watch y watchEffect son herramientas para sincronizar con el exterior, no para construir una cadena de estado derivado.
• En Vue conviene distinguir siempre fuente de verdad, dato derivado y efecto externo porque casi todos los bugs reactivos rompen una de esas fronteras.

Errores comunes

• Usar watchers para derivar datos que podrían salir de computed introduce sincronizaciones manuales y fallos difíciles de seguir.
• Copiar valores reactivos a variables locales sin toRefs o storeToRefs rompe la relación con la fuente de verdad.

Ejemplo de código

<script setup lang="ts">
const modalOpen = ref(false);
const inputRef = ref<HTMLInputElement | null>(null);

async function openModal() {
  modalOpen.value = true;
  await nextTick();
  inputRef.value?.focus();
}
</script>

Ejemplo o caso real

En una pantalla con filtros, carga remota y varios estados locales, estas decisiones afectan directamente a si la UI se mantiene estable o empieza a comportarse de forma impredecible.

Idea clave

Si separo fuente de verdad, derivación y efecto, la mayoría de problemas reactivos pierden fuerza.