Vue Composition API (Nueva API en Vue 3)

arrow_back Blog

Vue Composition es una nueva API que aparece en Vue 3, la nueva versión de Vue.js, un framework JavaScript para la creación de interfaces de usuario (UI). Vue Composition API es una forma alternativa de escribir componentes en Vue.js que permite una mayor flexibilidad y modularidad en la estructura de los componentes.

Con Vue Composition API, puedes escribir componentes utilizando una serie de funciones y propiedades que te permiten separar la lógica del componente en módulos más pequeños y reutilizables. Esto puede ser útil si tienes componentes grandes y complejos, ya que puedes dividir la lógica en módulos más pequeños y más fáciles de entender y mantener. A estas funciones/módulos se les conoce como composables.

Nueva función setup en Vue Compositon API

La función setup es una de las funciones más importantes de la API de Composición en Vue 3. Esta función se ejecuta cuando se crea un componente y se utiliza para inicializar y configurar el componente.

La función setup se puede utilizar para realizar varias tareas, como:

  1. Inicializar y configurar las propiedades del componente.

  2. Establecer los valores iniciales para las variables del componente.

  3. Establecer los listeners para los eventos.

  4. Realizar solicitudes a una API.

Aquí tienes un ejemplo de cómo se podría utilizar la función setup en un componente de Vue:

Como puedes ver en el ejemplo anterior, la función setup se utiliza para inicializar y configurar las propiedades del componente, establecer los valores iniciales para las variables del componente y establecer los listeners para los eventos. Además, también se puede utilizar para realizar solicitudes a una API.

La función setup es una pieza importante en la nueva Composition API de Vue 3.

Reactividad en Vue Composition API

La reactividad es uno de los principales conceptos de Vue.js y se refiere a la capacidad de una aplicación para actualizar automáticamente la interfaz de usuario (UI) cuando se producen cambios en los datos. En Vue.js, la reactividad se consigue mediante el uso de objetos reactivos, como ref y reactive.

En la API de Composición de Vue, se puede utilizar la función ref para crear un objeto reactivo para una sola propiedad. Por ejemplo:

Cuando se produce un cambio en el valor de message, se actualizará automáticamente la UI para reflejar el cambio.

Por otro lado, la función reactive se puede utilizar para crear un objeto reactivo para varias propiedades. Por ejemplo:

Cuando se produce un cambio en el valor de message o count, se actualizará automáticamente la UI para reflejar el cambio.

En resumen, la reactividad en la API de Composición de Vue se consigue mediante el uso de objetos reactivos como ref y reactive, lo que permite actualizar automáticamente la UI cuando se producen cambios en los datos.

Lifecycle Hooks en Vue Composition API

En Vue.js, los "lifecycle hooks" son métodos especiales que se invocan en diferentes momentos del ciclo de vida de un componente. Estos métodos se utilizan para ejecutar cierta lógica cuando el componente se crea, se destruye, se actualiza o se monta en el DOM.

En Vue.js 2, los lifecycle hooks se definen como métodos de instancia en el objeto de opciones de un componente. En Vue.js 3, con la introducción de la Composition API, los lifecycle hooks se definen como funciones que se pasan a la función onMounted, onUpdated, onBeforeUnmount, etc.

A continuación te muestro un ejemplo de cómo se pueden utilizar los lifecycle hooks en Vue.js 3 con la Composition API:

Los lifecycle hooks disponibles en Vue.js 3 con la Composition API son:

  • onBeforeMount: se invoca justo antes de que el componente se monte en el DOM.

  • onMounted: se invoca cuando el componente se ha montado en el DOM.

  • onBeforeUpdate: se invoca justo antes de que el componente se actualice.

  • onUpdated: se invoca cuando el componente se ha actualizado.

  • onBeforeUnmount: se invoca justo antes de que el componente se desmonte del DOM.

  • onUnmounted: se invoca cuando el componente se ha desmontado del DOM.

Inyección de dependencias en Vue Composition API

La inyección de dependencias (DI, por sus siglas en inglés) es un patrón de diseño que consiste en pasar objetos dependientes como parámetros a una función o clase en lugar de crearlos directamente dentro de ella. Esto permite hacer que el código sea más fácil de probar y mantener, ya que las dependencias se pueden proporcionar de manera más fácil y flexible.

En Vue.js 3, con la introducción de la Composition API, se pueden utilizar las funciones provide y inject para implementar la inyección de dependencias. La función provide se utiliza para proporcionar una dependencia a un componente o a sus descendientes, mientras que la función inject se utiliza para inyectar una dependencia en un componente.

Si deseas aprender a utilizar provide/inject en Vue Composition no te pierdas esta entrada de blog.


Si quieres seguir aprendiendo más cosas sobre Vue 3 y Composition API, no te pierdas la ruta de aprendizaje.

Cursosdesarrolloweb Cursosdesarrolloweb

Cursosdesarrolloweb es una plataforma educativa con cursos y tutoriales en texto y vídeo.

Términos y condiciones Política de privacidad Formulario de contacto

Copyright 2024 © Todos los derechos reservados.

Contacto