No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Computed Properties y Watchers

12/38
Recursos

Aportes 53

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥榮aimbol鈥 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 鈥渢rackear鈥 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.

Me gusta que el metodo computed solo es para funciones que devuelven un valor y method es para funciones mas dinamicas es super bien tener todo separado
me encanta lo facil y sencillo que explica el profe, me recuerda mucho y sin ofender por la comparacion pero me acuerda mucho a blueweb y su forma de explicar tambien .

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

En la propiedad watch se puede no s贸lo declarar la escucha de alguna propiedad de data, sino que tambi茅n se puede escuchar el valor de alguna propiedad computada!! Esto es 煤til ya que en las funciones de las propiedades computadas no es una buena pr谩ctica cambiar datos del modelo.

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 鈥減ipe鈥:

<!-- 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

<h4>Computed properties</h4>

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.

<h4>Watchers</h4>

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.

En un proyecto vi que usaban una propiedad computada para generar un slug a partir de una cadena, ahora entiendo como funcionaba.

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