Aprender Vuejs Componentes built-in avanzados

Vue proporciona varios componentes built-in que resuelven necesidades comunes en aplicaciones modernas: renderizar contenido fuera de la jerarquía del DOM, gestionar estados de carga asíncronos, animar transiciones de elementos y cachear componentes dinámicos. Este módulo cubre en profundidad Teleport, Suspense, Transition, TransitionGroup y KeepAlive.

Teleport

Teleport permite renderizar contenido en un nodo del DOM diferente al del componente padre, manteniendo la jerarquía lógica de Vue intacta:

<script setup lang="ts">
import { ref } from 'vue'

const showModal = ref(false)
</script>

<template>
  <button @click="showModal = true">Abrir modal</button>

  <Teleport to="#modals" defer>
    <div v-if="showModal" class="modal-overlay">
      <div class="modal-content">
        <p>Contenido del modal</p>
        <button @click="showModal = false">Cerrar</button>
      </div>
    </div>
  </Teleport>
</template>

Con el prop defer, el Teleport espera a que el destino exista en el DOM antes de montar el contenido, lo que es útil cuando el contenedor se renderiza en el mismo ciclo.

Suspense

Suspense gestiona estados de carga para componentes con setup asíncrono, mostrando un fallback mientras se resuelven:

<template>
  <Suspense>
    <template #default>
      <AsyncUserProfile />
    </template>
    <template #fallback>
      <div class="skeleton">Cargando perfil...</div>
    </template>
  </Suspense>
</template>

Transition y TransitionGroup

Transition aplica animaciones CSS al entrar y salir un elemento del DOM. TransitionGroup hace lo mismo para listas, añadiendo además animaciones de movimiento con la técnica FLIP:

<template>
  <TransitionGroup name="list" tag="ul">
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </TransitionGroup>
</template>

<style>
.list-enter-active, .list-leave-active {
  transition: all 0.3s ease;
}
.list-enter-from, .list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.list-move {
  transition: transform 0.3s ease;
}
</style>

KeepAlive

KeepAlive cachea instancias de componentes dinámicos para preservar su estado cuando se intercambian:

<script setup lang="ts">
import { ref, shallowRef } from 'vue'
import TabA from './TabA.vue'
import TabB from './TabB.vue'

const currentTab = shallowRef(TabA)
</script>

<template>
  <KeepAlive :max="5">
    <component :is="currentTab" />
  </KeepAlive>
</template>

Los componentes cacheados disparan los hooks onActivated y onDeactivated en lugar de onMounted y onUnmounted, permitiendo ejecutar lógica específica al activarse o desactivarse.