¿Cómo integrarías una librería imperativa o de terceros con Vue sin pelearte con su sistema reactivo?

Respuesta

• Crea la instancia imperativa en montaje, guárdala en shallowRef o markRaw y destrúyela siempre al desmontar.
• Sincroniza solo las entradas relevantes mediante métodos explícitos de la librería externa, en lugar de reconstruir el recurso completo en cada cambio reactivo.
• Si la integración crece, envuélvela en un composable o adaptador pequeño para que el componente vea una interfaz más declarativa.

Puntos clave

• La decisión correcta en Vue casi siempre depende del alcance del problema: componente, subárbol, feature o aplicación completa.
• Una buena arquitectura deja dependencias visibles, reduce puntos de escritura y mantiene cerca del caso de uso lo que cambia junto.
• Si una solución necesita demasiadas capas para explicar algo pequeño, probablemente está modelando peor el problema, no mejor.

Errores comunes

• Crear una capa “shared” enorme donde cabe todo acaba destruyendo justo el aislamiento que se buscaba.
• Escoger mecanismo por moda en vez de por alcance suele dejar soluciones más difíciles de leer que de cambiar.

Ejemplo de código

<script setup lang="ts">
import { markRaw, onMounted, onUnmounted, shallowRef } from "vue";

const chart = shallowRef<any>(null);
const root = shallowRef<HTMLDivElement | null>(null);

onMounted(() => {
  chart.value = markRaw(createChart(root.value!));
});

onUnmounted(() => chart.value?.destroy());
</script>

Ejemplo o caso real

Esto suele aparecer en features vivas del producto donde cada cambio pequeño empieza a tocar demasiados componentes, composables o stores.

Idea clave

La mejor arquitectura en Vue es la que reduce dependencias hoy y sigue siendo explicable mañana.