Funciones Computadas en Vue.js con Composition API

Clase 16 de 23 • Curso de Vue.js: Componentes y Composition API

Resumen

¿Cómo utilizar propiedades computadas en Vue JS con Composition API?

Vue JS ha revolucionado la manera en que interactuamos con los datos en aplicaciones web, y las propiedades computadas son una pieza clave para hacerlo aún más eficiente. Con el Composition API de Vue, podemos manejar estas propiedades de manera más flexible y modular. A continuación, te explicamos cómo utilizarlas en esta nueva sintaxis y sus beneficios principales.

¿Qué son las propiedades computadas?

Las propiedades computadas son funciones declarativas que se basan en propiedades reactivas para devolver un resultado. A diferencia de las funciones simples, las propiedades computadas se almacenan en caché de manera eficiente hasta que sus dependencias cambian, evitando procesos innecesarios y optimizando el rendimiento.

Ventajas de usar propiedades computadas:

Legibilidad: El código es más limpio y fácil de entender.
Eficiencia: Vue almacena en caché las propiedades computadas hasta que una de sus dependencias cambia.
Reusabilidad: Facilitan la reutilización del código, reduciendo la duplicación.

¿Cómo se implementan propiedades computadas con Composition API?

Implementar propiedades computadas en Composition API sigue una lógica clara y sencilla. Analicemos cómo podemos aplicarlo con un ejemplo simple: concatenar un nombre y apellido en un string completo.

import { ref, computed } from 'vue';

export default {
  setup() {
    const firstName = ref('Diana');
    const lastName = ref('Martínez');

    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    return {
      firstName,
      lastName,
      fullName,
    };
  }
}

Pasos clave:

Definir variables reactivas: Utilizamos ref para crear las propiedades reactivas firstName y lastName.
Crear propiedad computada: Usamos computed para declarar fullName, que concatenará firstName y lastName.
Devolver propiedades: Las devolvemos en el retorno de setup para que el template pueda encontrarlas.

¿Cuáles son las mejores prácticas al usar funciones computadas?

Aunque las propiedades computadas son poderosas, es crucial saber cómo manejarlas adecuadamente para evitar problemas:

Cacheo o almacenamiento en caché: Al tener dependencias reactivas, Vue solo vuelve a calcular la propiedad computada cuando una dependencia cambia.
Evitar loops infinitos: Al crear propiedades computadas, asegúrate de no tener dependencias recursivas que puedan causar un bucle infinito.
No utilizar this dentro de setup: Con Composition API, la función setup no puede acceder a objetos this como en Options API. Ten cuidado al migrar código.

¿Cómo se comparan Composition API y Options API al usar propiedades computadas?

En la sintaxis de Options API, las propiedades computadas se definen usando computed como propiedad dentro de un objeto Vue. Composition API sigue un enfoque funcional gracias a las funciones puras de JavaScript, lo que convierte el código en algo más modular y fácilmente mantenible. Esta transición no solo mejora la claridad del código, sino que también facilita la comprensión de la reactividad en Vue JS.

Te recomendamos que compares el código de proyectos implementados con Options API y Composition API para observar las diferencias en legibilidad y eficiencia.

¡Explora cómo las propiedades computadas pueden incrementar el potencial de tus aplicaciones y actúa con creatividad para desarrollar soluciones innovadoras! Y no te olvides de compartir tus experiencias y retos en la comunidad. ¡Sigue aprendiendo, y nos vemos en la próxima clase!

Andrés Felipe Perdomo Alvarado

student•

Propiedades computadas en objetos, con reactive():

const persona = reactive({
  nombre: "Felipe",
  apellido: "Perez",
  edad: 20,
  nombreCompleto: computed(() => {
    return `${persona.nombre} ${persona.apellido}`;
  }),
 });

Dufainder Bedoya

student•

Codigo de esta clase

<template>
  <div>{{ fullname }}</div>
</template>

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

export default {
  setup() {
    const firstName = ref("Dufainder");
    const lastName = ref("Bedoya");

    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`;
    });

    return {
      fullName,
    };
  },
};
</script>

Mauricio Combariza

student•

Gracias

Solo tener en cuenta que en el template debe que ser fullName, para que sea igual a la variable.

Gracias

Josue Cerron Tuesta

student•

Gracias bro!

Miguel Angel Reyes Moreno

student•

Otra forma de hacerlo, me parece que el código queda un poco más limpio, ¿qué opinan?

<template>
  <h3>{{ fullName }}</h3>
</template>

<script>
import { ref, computed } from "vue"

export default {
  setup() {
    const firstName = ref("John")
    const lastName = ref("Doe")

    return {
      fullName: computed(() => `${firstName.value} ${lastName.value}`)
    }
  }
}
</script>

Jose Barboza

student•

es una opción depende al caso

Kenneth Leonel Cruz Ordoñez

student•

A veces se busca que el código sea legible y entendible para el resto de programadores que darán mantenimiento a un aplicativo. . A veces se prioriza el hecho de tener más líneas de código vs 'rendimiento' y 'elegancia'.

Zoila Yaneth Villatoro Garcia

student•

Donde es que se crea el this, en el ciclo de vida de vuejs? me llama la atención que no se puede acceder a this en el setup, podrian explicarme por favor

Diana Martinez

student•

Claro, mira, para Vue 2 todo era una instancia de la clase Vue, y todos los componentes extienden ese componente base, a partir de Vue 3 ya todo es programación funcional, por lo tanto el this es el this de una función, la función setup, no el this de un objeto Vue.

Recordarás que en Vue 2 todo lo declarábamos en un objeto de configuración. Cuando declaras un objeto, puedes acceder a sus valores por un this, pero cuándo solo usas una función para procesar los datos, no, esa es la razón.

En otras palabras, setup no es un método del objeto de Vue, sino una función que únicamente recibe un contexto como argumento, y lo que retorna, eso si se asigna al contexto del objeto del componente.

Zoila Yaneth Villatoro Garcia

student•

muchas gracias :D

Ameth Ordoñez Erazo

student•

Mi reto con computed haciendo que reciba un valor por parámetro:

<template>
  <div>
    <button @click="estado = !estado">Cambiar valor</button>
  </div>
  <div><button @click="miobj.count++">Aumentar valor</button></div>
  <div><button @click="proximo = 0">Resetear</button></div>
  <div v-show="estado">¡Apareci!</div>
  <div>{{ miobj.count }}</div>
  <div>Siguiente valor: {{ proximo }}</div>
</template>

<script setup>
import { ref, reactive, watch, computed } from "vue";

const estado = ref(true);
const miobj = reactive({ count: 0 });

// const proximo = computed(() => miobj.count + 1);

const proximo = computed({
  get: () => miobj.count + 1,
  set: (valor) => {
    miobj.count = valor;
  },
});

watch(proximo, (newValue, oldValue) => {
  console.log("Anterior", oldValue);
  console.log("Nuevo", newValue);
  if (miobj.count > 10) {
    proximo.value = 0;
  }
});
</script>

Nestor Ramirez

student•

Esto es como el usestate que se utiliza en react?

Diana Martinez

student•

No exactamente, React no es reactivo, entonces necesita mantener el estado y usa ese hook, pero Vue si es reactivo, así que no diría que es el mismo comportamiento, más bien hay que verlo como si Vue estuviera detectando el evento de un cambio en una variable.

Alan Ibañez

student•

Entonces con la funcion setup(){} hacemos todo lo que haciamos con options API pero de una forma digamos "manual" pero más sencillo. Solo es acostumbrarse a ya no declarar las variables en data sino usar ref o reactive

Ricardo Portillo

student•

Es una respuesta a modelo funcional que implemento react. En vez de seguir el paradigma orientado a objeto le paradigma funcional es más optimo en manejo de memoria para frontend.