Composition API
La Composition API en Vue.js es un enfoque moderno para estructurar la lógica de los componentes, diseñado para mejorar la modularidad y la reutilización del código. A diferencia de la Options API, donde los datos, métodos y propiedades computadas se organizan en secciones separadas, la Composition API centraliza toda la lógica dentro de la función setup(). Esto permite gestionar componentes complejos de manera más clara y escalable, especialmente en aplicaciones grandes donde la compartición de lógica entre componentes es crítica.
La Composition API permite a los desarrolladores trabajar con conceptos clave de Vue.js, como la reactividad mediante ref y reactive, propiedades computadas con computed, y seguimiento de cambios con watch. Además, facilita la implementación de algoritmos, estructuras de datos y principios de programación orientada a objetos (OOP). Este enfoque incrementa la testabilidad y la mantenibilidad del código, al tiempo que permite integraciones eficientes dentro de la arquitectura de software y sistemas modernos.
En este tutorial, aprenderás a gestionar estados reactivos, crear funciones reutilizables (composables), optimizar el rendimiento y evitar errores comunes, como fugas de memoria o un manejo incorrecto de datos. Los ejemplos están orientados a aplicaciones prácticas en proyectos reales de Vue.js y te proporcionarán herramientas avanzadas para dominar la Composition API y aplicar buenas prácticas de desarrollo profesional.
Ejemplo Básico
textimport { createApp, ref, computed } from 'vue'
const App = {
setup() {
const contador = ref(0)
const incrementar = () => {
contador.value++
}
const dobleContador = computed(() => contador.value * 2)
return {
contador,
incrementar,
dobleContador
}
},
template: ` <div> <h1>Contador: {{ contador }}</h1> <h2>Doble contador: {{ dobleContador }}</h2> <button @click="incrementar">Incrementar</button> </div>
`
}
createApp(App).mount('#app')En este ejemplo, la función setup() actúa como núcleo de la Composition API. La variable contador se crea con ref, haciéndola reactiva, lo que significa que cualquier cambio se reflejará automáticamente en la plantilla. La función incrementar actualiza el estado, mientras que dobleContador calcula un valor derivado de forma automática mediante computed. Al retornar estas variables desde setup(), se exponen al template para su uso directo, promoviendo claridad y modularidad en el código.
Es crucial comprender la diferencia entre ref y reactive, así como el uso de .value para acceder a los datos de ref. Este enfoque mejora la reutilización y prueba de código, características fundamentales para proyectos complejos de Vue.js.
Ejemplo Práctico
textimport { createApp, reactive, watch } from 'vue'
const App = {
setup() {
const estado = reactive({
tareas: [],
nuevaTarea: ''
})
const agregarTarea = () => {
if (estado.nuevaTarea.trim() !== '') {
estado.tareas.push({ texto: estado.nuevaTarea, completada: false })
estado.nuevaTarea = ''
}
}
watch(() => estado.tareas.length, (nuevoValor, valorAntiguo) => {
console.log(`Número de tareas cambiado: ${valorAntiguo} → ${nuevoValor}`)
})
const eliminarTarea = (indice) => {
estado.tareas.splice(indice, 1)
}
return {
estado,
agregarTarea,
eliminarTarea
}
},
template: ` <div> <h1>Lista de Tareas</h1> <input v-model="estado.nuevaTarea" placeholder="Agregar tarea" /> <button @click="agregarTarea">Agregar</button> <ul> <li v-for="(tarea, indice) in estado.tareas" :key="indice">
{{ tarea.texto }} <button @click="eliminarTarea(indice)">Eliminar</button> </li> </ul> </div>
`
}
createApp(App).mount('#app')Aquí se utiliza reactive para crear un objeto estado completamente reactivo. Las funciones agregarTarea y eliminarTarea manipulan el array de tareas y realizan validaciones básicas. watch se emplea para observar cambios en la longitud del array y ejecutar efectos secundarios, como la impresión en consola. Este ejemplo combina principios de OOP, modularidad y gestión segura del estado. Se recomienda evitar manipulaciones directas del DOM y limpiar los watchers para prevenir fugas de memoria, cumpliendo así las buenas prácticas de Vue.js.
Entre las mejores prácticas se incluyen: elegir correctamente entre ref y reactive, usar computed y watch de manera segura, y manejar errores dentro de setup() con bloques try/catch. Para depuración, Vue Devtools es fundamental. La optimización de rendimiento requiere evitar operaciones costosas dentro de watch o computed y emplear cálculos diferidos. Además, validar datos de entrada garantiza seguridad y estabilidad en aplicaciones Vue.js complejas.
📊 Tabla de Referencia
| Vue.js Element/Concept | Description | Usage Example |
|---|---|---|
| ref | Crea una variable reactiva simple | const cuenta = ref(0) |
| reactive | Crea un objeto o array reactivo | const estado = reactive({ nombre: '', edad: 0 }) |
| computed | Propiedad computada y reactiva | const doble = computed(() => cuenta.value * 2) |
| watch | Observa cambios y ejecuta efectos secundarios | watch(() => estado.tareas.length, (nuevoValor) => console.log(nuevoValor)) |
| setup | Función central de Composition API | setup() { const datos = ref(0); return { datos } } |
La Composition API permite gestionar reactividad, propiedades computadas y observadores de cambios de forma eficiente, construyendo componentes escalables y reutilizables. Los siguientes pasos incluyen crear composables, integrar Pinia para gestión de estado y usar async setup y suspense en escenarios complejos. La documentación oficial de Vue.js y proyectos open source son recursos valiosos para profundizar y aplicar la API en proyectos reales.
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior