No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Computed properties con Options API

32/37
Recursos

Aportes 5

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Para el caso de la primer propiedad computed se puede escribir en código de la siguiente forma:

  computed: {
    price_color() {
      const colorRojo = "rgb(104, 104, 209)";
      const colorAzul = "rgb(188, 30, 67)";
      const isLessThanTwo = this.product.stock <= 1;
      return isLessThanTwo ? colorAzul : colorRojo;
    }
  }

Lo que permite que sea mas declarativo tu código y fácil de leer

Una propiedad computada SIEMPRE tiene que retornar un valor. A mi me gusta llamarlas variables reactivas porque siempre que algo que da el valor de dicha propiedad cambie, el valor se va a actualizar.
.
Vue buscar√° aquellas variables reactivas que se usen dentro de la propiedad computada y las estar√° vigilando para que cada que cambien la computed property se re-ejecute.
.
¬ŅCu√°ndo usar un computed o un watcher?
.
Depende, si solo necesitas desencadenar una acción cuando una propiedad cambie de valor sin tener que modificar ninguna otra propiedad, entonces puedes usar un Watcher.
.
Si necesitas modificar una propiedad cada vez que alguna otra cambie, entonces puedes usar una computed.
.
Algo que el profesor Jorge Baumann siempre dec√≠a: ‚Äú¬ŅCu√°ndo usar una computed? Siempre que puedas‚ÄĚ jaja, se refiere a si usar una computed o usar un m√©todo ^^
.
Dejo el códigon de la clase:
.
https://github.com/RetaxMaster/vue3-platzi-commerce/tree/f5fe75f04ba634b83721eb7b55accad4ab7139ef

En el caso de tener que hacer una llamada a un API para la b√ļsqueda de un un producto ¬Ņlo har√≠amos con una computada? ¬ŅSi/No, Por qu√©?.

No me ha quedado claro el que casos deber√≠a de usar el watch. ¬ŅPodr√≠as poner alg√ļn caso real en el que sea mejor usar el watch?. Muchas gracias.

Las computed properties son las que crean una nueva propiedad reactiva, basada en sus dependencias. Son funciones que siempre retornan un valor.

Una forma m√°s elegante de escribir el if else:

computed: {
    description_color() {
      return this.product.stock <= 1 ? 'rgb(255, 0, 0)' : 'rgb(104, 104, 209)'
    }
  }