Propiedades Computadas y Watchers en Vue.js

También la computadas tienen la ventaja de que almacena la data en el cache del navegador mientras que el watcher (observadores) no. Igual dejo la documentación oficial acá en español para los que deseen ampliar el tema o les quede difuso.

https://es.vuejs.org/v2/guide/computed.html

Al final hay un buen ejemplo sobre el watcher (observadores)

No es ‘saimbol’ es simplemente symbol.

Propiedades computadas (Computed) = propiedades que se calculan en tiempo real en base a los valores de otras propiedades.

Watcher = Funciones que ejecutan un código es decir que por medio de un cambio de la observación de una variable se puede disparar determinado código o ejecutar una función.
Podemos pensarlo como un Disparador de código.

• Las propiedades computadas son funciones que nos devolverán un valor en tiempo real basados en los valores de las propiedades, es decir en aquellas que están definidas en nuestro data.

computed: {
      title() {
         return `${this.name} - ${this.symbol}`
      }
   },

• Los watchers son funciones que determinan un código a partir de la observación del cambio en una variable.
  El nombre de un watcher, es decir la función dentro del watch debe corresponder con el nombre de la propiedad en data.

watch: {
      showPrices (newValue, oldValue) {
         console.log(newValue,oldValue);
      }
   },

Para devolver un resultado en title() de la función computada fue de la siguiente manera:

computed: {
    title(){
      return  this.name + ' ' + this.symbol
    }
  }

Interesante como se desarrolla la transcripción del video a medida que este avanza. Observo textos o palabras transcritas con sonido similar a como las pronuncia Ignacio que afectan el sentido de lo que él está diciendo. Una lástima. Tengo la costumbre de acudir a las transcripciones a fin de hacer una ayuda de memoria de lo que voy aprendiendo. Igualmente tomo aportes de la comunidad. Me parece que es una buena práctica.

que bien explicas! te felicito voy avanzando mucho con este curso

Excelente curso hasta ahora, muy bien explicado todo, solo un comentario.

En la parte del primer computed mencionas que el objeto nuevo (computed) es dentro de data.

Por si alguien se confunde, esto es fuera de data.

En resumen, una propiedad computada se va a ejecutar cada vez que cualquier de las propiedades que se están usando dentro de ella cambie, y siempre debe retornar un valor, y dentro del HTML se puede usar como si fuera una propiedad normal

El watcher nos sirve para “trackear” una propiedad, que cada que cambie disparará el watcher y podremos hacer cualquier cosa, lo importante es que debe tener el mismo nombre de la propiedad que queremos trackear

"Cuando necesitas cambiar los datos, debes usar methods.
Cuando necesitas cambiar la presentación de los datos existentes, debes usar computed properties"
Tomado de un video de VueSchool.

Geniales estas propiedades, hace un par de días me pidieron revisar la actividad o inactividad de un usuario en la pantalla del sistema, agregue una librería llamada idle-vue y me pedía usar estas propiedades, no entendía bien porque, ahora lo entiendo todo!!!, Gracias Nacho

Computed Properties: Son propiedades que se calculan en tiempo real en base a los valores de otras propiedades.
Watchers: Disparador de código.

Me esta gustando la simpleza de Vue…

Las computed properties son las propiedades generadas a partir de los valores de otras propiedades. Son funciones que devuelven un valor.

  computed: {
    title(){
      return `${this.name} - ${this.symbol}`
    }
  }

Los watchers tienen un comportamiento similar a las computed properties, con la diferencia que estas son funciones que ejecutan un código. El nombre de la función tiene que corresponder al nombre de una propiedad en data. Recibe dos valores como parametros, el valor nuevo y el valor viejo.

  watch: {
    showPrices(newValue, oldValue){
      console.log(newValue, oldValue)
    }
  }

12.-Computed Properties y Watchers

Son aquellas propiedades que se generan a partir de los valores de otras propiedades, es decir, que tenemos propiedades definidas dentro de data que al modificarse van a permitir generar un valor nuevo sobre otra propiedad.

Los watchers tienen un comportamiento similar, pero en lugar de ser funciones que devuelven un valor, son funciones que ejecutan un código, es decir, que a partir del cambio u observación de una variable puede ejecutar determinado código o función.

El nombre de la función dentro del watcher debe corresponder con el nombre de una propiedad de data.

El watcher recibe dos valores, el primero es el valor nuevo, y el segundo es el viejo.

Las propiedades computadas se calculan en tiempo real en base a los valores de otras propiedades, un ejemplo aplicado en nuestro proyecto sería una propiedad que calcule en tiempo real el precio del Bitcoin en euros, en base a dólares, por otro lado podemos usar el watcher para que cada que cambie el valor del precio del BTC se dispare una push notification avisándole al usuario que el BTC alcanzó determinado precio.

Los watchers me han recordado al hook useEffect de React

Adjunto enlace para detallar un poco mas para que sirve las propiedades computadas
https://es-vuejs.github.io/vuejs.org/v2/guide/computed.html

Para hacer las comillas invertidas usar ALT + tecla }, luego darle un espacio.

minuto 4:26… ¿newVal y oldVal son palabras reservadas?

Una propiedad computada dentro de una vista se comporta como una propiedad normal.

muy bien explicado el uso de computed properties y watchers.

Excelente clase

Un Watcher es una funcion que se ejecuta cuando el valor de una propiedad que corresponde al mismo nombre del watcher cambia su valor

Muy buen profe!

woooo computed and watch!!!

Excelente contenido

Por que declaramos una propiedad computed ?

Basicamente por que dentro de la propiedad data() NO podemos poner ningun tipo de logica solamente aquella ifnromacion que pintaremos en el navegador

¿Cuál es la diferencia entre una computed property y un watcher?

El watcher es una función que ejecuta cierta funcionalidad y la computed es una función que devuelve una nueva propiedad.

Computed Properties

Son propiedades que se generan a partir de los valores de otras propiedades, es decir que tenemos propiedades definidas dentro de data, que al modificarse van a permitir generar un valor nuevo sobre otra propiedad.

Las propiedades computadas son funciones que siempre devuelven un valor.

Vue puede identificar cada vez que cuando utilizamos this.NombreDeLaPropiedad se ejecuta o se recomputa cada vez que cambia el valor de la propiedad, de nuestro lado no es necesario hacer nada más, ya que Vue se encarga de mantener los valores de la propiedad consistentes.

De la misma forma que con methods, this es la forma que utilizamos para acceder a las propiedades, a otras propiedades computadas o a cualquier otra cosa que esté relacionada con la instancia de Vue.

computed: {
    title () {
      return `${this.name} - ${this.symbol}`
    }
  },

Una propiedad normal se utiliza de la misma forma que una propiedad computada.

<h1 
      v-bind:class="changePercent > 0 ? 'green' : 'red'"
    >
      {{ title }}
      <span v-if="changePercent > 0">👍</span>

Son propiedades que se calculan en tiempo real, en base a los valores de otras propiedades. Un ej. Una propiedad computada el precio del Bitcoin en Euros en base del Bitcoin en USD, cada vez que el precio del Bitcoin en USD cambie, también el precio del Bitcoin en Euros también se actualizaría.

Watchers

Son funciones que ejecutan un código, es decir, a partir del cambio u observación de una variable se puede disparar un determinado código o ejecutar una variable. Los Watchers son funciones y se tienen que corresponder con el nombre de una propiedad de data.

watch: {
    showPrices (newVal, oldVal) {
      console.log(newVal, oldVal)
    }
},

Un Watchers es un disparador de código, se podría utilizar por ej. Cada vez que cambia el precio del Bitcoin en USD se dispara una PushNotification cada vez que el precio del Bitcoin alcanza un determinado precio.

Estoy algo confundido…
En el min 1:38 Menciona que computed va dentro de data… pero en realidad lo pone afuera.

👌

esta interesante, espero lo veamos mas adelante en el proyecto

Las propiedades computadas son aquellas propiedades que se generan a partir de otras propiedades

Las propiedades computadas son funciones que siempre devuelven un valor

Una propiedad computada dentro de una vista no se declara como una funcion sino como una propiedad

Si bien entendí el concepto de las propiedades computadas, aún se me hacen borrosas las diferencias con methods, que también podemos tener funciones que calculen valores en función a otras propiedades.

Teoria que ayuda mucho

• computed: funciones que devuelven un valor en tiempo real.
• watchers: funciones que determinan un código a partir de la observación del cambio de una variable. El nombre del whatcher debe corresponder con el nombre de la propiedad en data.

¿Osea que si hago get a un api es mejor poner mi codigo en computed en vez de colocarlo en methods?

.this nos sirve para acceder a otras propiedades o cualquier cosa que este relacionada con la instancia

también existen los filtes, si tienes conocimiento en angular, podrás darte cuenta que son como los pipes.

Vue.js le permite definir filtros que pueden usarse para aplicar formato de texto común. Se puede utilizar filtros en dos lugares: interpolaciones mustache y expresiones v-bind (siendo esta última, soportada en 2.1.0+). Los filtros se deben agregar al final de la expresión de JavaScript, denotados por símbolo “pipe”:

<!-- en mustaches -->
{{ message | capitalize }}

<!-- en v-bind -->
<div v-bind:id="rawId | formatId"></div>

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

Mas información, documentación de VueJS

Guao, yo aprendi a usar VueJS de manera empirica para proyectos en mi trabajo. Me costo mucho entender ciertos conceptos y algunos otros quedaron a medio entender. Pero esta clase acaba de sacarme de dudas sobre como funcionaba bien los Computed y los Watchers de una manera tan simple que me siento tonto xD

Las propiedades computadas (computed properties) son aquellas que se generan a partir de otros valores en tiempo real. Es decir, que tenemos propiedades definidas en Data que cuando se modifiquen van a generar un valor nuevo sobre la propiedad computada.

Las propiedades computadas se definen dentro de la instancia de Vue como un objeto, y dentro se definen las propiedades en forma de función. Cuando alguna de las propiedades que componen las propiedad computada cambia, esta se actualizará automáticamente.

Los watchers son funciones que ejecutan un código a partir del cambio de una variable. De igual manera se definen como un objeto dentro de la instancia de Vue.

El nombre del watcher tiene que ser igual al nombre de la propiedad de Data que queremos estar observando. Los watchers reciben dos parámetros, el valor viejo y el valor nuevo de la propiedad.

template string no seria digamos lo mismo que decir interpolación de string?

Por lo que dice Vue en su documentacion normalmente va a ser mejor utilizar una propiedad Computed comparada con un Watcher. Esto tiene que ver con varios motivos pero el principal es evitar la repeticion del codigo y que este sea mas limpio en general.
Dejo el link a esta parte de la documentacion: https://es.vuejs.org/v2/guide/computed.html#Propiedad-Computada-vs-Watched

Lo nuevo para mi son los watches, y lo bueno es que reaccionan al cambio de alguna propiedad.

que diferencia hay entre agregar una function en un properties a agregar una function dentro de methods ?¿?¿?¿?¿?¿?¿¿?¿?

Hola Devs:
-Recomiendo esta lectura de Computed properties vs Watchers: Click Aqui

watchers son funciona que ejecutan codigo