El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

API de Composición de Vue 3

Siguiente ►
►

La API de Composición es una de las características más destacadas de Vue 3. Introduce una nueva forma de organizar y reutilizar el código en los componentes de Vue, proporcionando una mayor flexibilidad y escalabilidad en el desarrollo de aplicaciones.

¿Qué es la API de Composición?

La API de Composición permite definir la lógica de un componente utilizando funciones en lugar de opciones específicas del componente. Esto facilita la reutilización de la lógica entre componentes y mejora la legibilidad y mantenibilidad del código.

Ventajas de la API de Composición

  • Reutilización de Código: Permite extraer y reutilizar la lógica de los componentes de manera más sencilla.
  • Mejor Organización: Facilita la organización del código en funciones, lo que puede mejorar la claridad y la estructura del componente.
  • Flexibilidad: Ofrece una mayor flexibilidad en la forma en que se puede estructurar y organizar la lógica del componente.

Conceptos Clave

setup Function

La función setup es el punto de entrada principal para la API de Composición. Se ejecuta antes de que el componente sea creado y es donde se define la lógica del componente.

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
};

En este ejemplo:

  • ref se utiliza para crear una referencia reactiva.
  • count es una referencia reactiva que se inicializa en 0.
  • increment es una función que incrementa el valor de count.
  • La función setup retorna un objeto que contiene count e increment, los cuales estarán disponibles en la plantilla del componente.

Refs y Reactividad

La API de Composición utiliza ref y reactive para manejar la reactividad.

  • ref: Crea una referencia reactiva a un valor primitivo.
  • reactive: Crea un objeto reactivo.
import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const state = reactive({
      message: 'Hello Vue 3'
    });

    return {
      count,
      state
    };
  }
};

Computed Properties

Las propiedades computadas se definen utilizando la función computed.

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    return {
      count,
      doubleCount
    };
  }
};

Watchers

Los observadores (watch) permiten reaccionar a los cambios en las propiedades reactivas.

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    return {
      count
    };
  }
};

Ejemplo Completo

A continuación, se presenta un ejemplo completo que utiliza varios conceptos de la API de Composición.

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    function increment() {
      count.value++;
    }

    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    return {
      count,
      doubleCount,
      increment
    };
  }
};
</script>

Ejercicio Práctico

Ejercicio

Crea un componente que tenga un contador y un mensaje. El contador debe incrementarse cada vez que se haga clic en un botón, y el mensaje debe cambiar cuando el contador sea un número par o impar.

Solución

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Message: {{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const message = ref('Count is even');

    function increment() {
      count.value++;
    }

    watch(count, (newValue) => {
      message.value = newValue % 2 === 0 ? 'Count is even' : 'Count is odd';
    });

    return {
      count,
      message,
      increment
    };
  }
};
</script>

Conclusión

La API de Composición de Vue 3 ofrece una forma poderosa y flexible de organizar y reutilizar la lógica de los componentes. Al dominar esta API, los desarrolladores pueden crear aplicaciones más mantenibles y escalables. En el siguiente módulo, exploraremos cómo utilizar Vue Router para gestionar la navegación en nuestras aplicaciones Vue.

◄ Anterior
◄
Siguiente ►
►

Curso de Vue.js

Módulo 1: Introducción a Vue.js

Módulo 2: Conceptos Básicos de Vue.js

Módulo 3: Componentes de Vue.js

Módulo 4: Vue Router

Módulo 5: Gestión de Estado con Vuex

Módulo 6: Directivas de Vue.js

Módulo 7: Plugins de Vue.js

Módulo 8: Pruebas en Vue.js

Módulo 9: Conceptos Avanzados de Vue.js

Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js

Módulo 11: Proyectos Reales con Vue.js

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados