Propiedades Computadas y Watchers en Vue.js

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Rendering Declarativo y Manipulacion de DOM

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:42

Propiedades Computadas y Watchers en Vue.js

Curso Básico de Vue.js 2

Clase 12 de 38

Clase 12 / 38

Recursos

¿Qué son las propiedades computadas en Vue.js?

Las propiedades computadas en Vue.js son herramientas poderosas que permiten generar valores dinámicos a partir de otras propiedades existentes en el estado de la aplicación. Estos valores no son directamente entregados al DOM, sino que se calculan dependiendo de los cambios en las propiedades que los componen. Esto optimiza el rendimiento y facilita el manejo del estado en las aplicaciones.

¿Cómo funcionan las propiedades computadas?

Las propiedades computadas funcionan como funciones que devuelven un valor calculado. Se definen dentro de un objeto computed en el componente Vue.js y su sintaxis es muy similar a la de los métodos. Sin embargo, a diferencia de los métodos, las propiedades computadas almacenan en caché sus resultados y solo se vuelven a calcular cuando sus dependencias cambian.

Ejemplo práctico: Configuración de una propiedad computada

Aquí tienes un ejemplo de cómo puedes definir y utilizar una propiedad computada:

// Dentro del archivo JS de la aplicación
export default {
  data() {
    return {
      monedaActual: 'BTC',
      simboloActual: '₿',
    };
  },
  computed: {
    tituloMoneda() {
      return `${this.monedaActual} - ${this.simboloActual}`;
    }
  }
};

En este ejemplo simple, tituloMoneda es una propiedad computada que combina el nombre de la moneda y su símbolo. Cada vez que uno de estos valores cambia, tituloMoneda se actualiza automáticamente.

¿Cómo incluir propiedades computadas en el HTML?

¿Qué tan fácil es incorporar estas propiedades en el HTML de nuestras aplicaciones? Muy sencillo. Las propiedades computadas se usan igual que cualquier otra propiedad de datos en Vue.js.

<!-- Dentro del archivo HTML -->
<h1>{{ tituloMoneda }}</h1>

En este bloque de código, estamos mostrando tituloMoneda directamente en un elemento h1.

¿Qué son los watchers y cómo funcionan?

Los watchers, o observadores, son otra poderosa característica de Vue.js que permite observar cambios en propiedades específicas y ejecutar código en respuesta a esos cambios. Se configuran como funciones que reciben los valores nuevo y antiguo de la propiedad observada, posibilitando la implementación de lógica reactiva.

Ejemplo de implementación de un watcher

A continuación, se muestra cómo definir un watcher para monitorizar los cambios en una propiedad:

// Dentro del archivo JS de la aplicación
export default {
  data() {
    return {
      precioDolar: 50000,
    };
  },
  watch: {
    precioDolar(nuevoValor, valorAnterior) {
      console.log(`El precio ha cambiado de ${valorAnterior} a ${nuevoValor}`);
    }
  }
};

En este ejemplo, cada cambio en precioDolar desencadena la impresión en la consola del cambio desde el valor anterior al nuevo.

Aplicaciones prácticas de los watchers

Una aplicación avanzada de los watchers podría ser para mandar notificaciones push cada vez que el valor de una criptomoneda alcanza un determinado precio, permitiendo a los usuarios tomar decisiones informadas a tiempo.

Recomendaciones de uso

Utiliza propiedades computadas: Estas propiedades son ideales para combinar o transformar datos de manera eficiente, ahorrando cómputo al evitar recalcular valores innecesariamente.
Implementa watchers donde corresponda: Los watchers son útiles cuando necesitas ejecutar lógica adicional o efectos secundarios cuando cambia una propiedad, especialmente para operaciones asíncronas o que requieren acceso al DOM.
Mantén un código limpio y comprensible: Asegúrate de que tus definiciones de propiedades computadas y watchers sean claras y documentadas, facilitando el mantenimiento y la escalabilidad de tu aplicación.

Este enfoque permitirá un desarrollo más escalable y manejable, maximizando la reactividad y eficiencia de tus aplicaciones construidas con Vue.js. Recuerda, ¡la clave es practicar y experimentar para dominar estas herramientas efectivamente!

Comentarios (59)59 comentarios

Manuel Durán

Hace 7 años

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)

Esteban Molina Gomez

Hace 5 años

Fue muy constructor leerlo y el ejemplo final es todo un éxito

Andrés Campuzano Garzón

Hace 6 años

No es 'saimbol' es simplemente symbol.

Carlos Rafael Córdova Flores

que buen aporte. Gracias :D

Luis Francisco Javier Gonzalo Colina Morales

No es "naik", es "naiki". (Igual yo tampoco sabía pronunciar symbol XD)

Abner Batz

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.

VERDUGO CHAVEZ DIANA ALEJANDRA

Gracias por el aporte

Erika De La Luz Castellanos

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);
      }
   },

Paul Mauricio Realpe Guerrero

Gracias por el aporte!

Jhonatan Hurtado Barbosa

Hace 4 años

Excelente aporte.

Abril Darynka Tapia Sosa

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

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

Rodrigo Ortega

Gracias, estoy haciendo el curso dentro de Laravel 6.18 y así me funcionó ;)

Uriel Alberto Arevalo Franco

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.

Carlos Eduardo Gomez García

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

Hernán Arica

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

Nacho Anaya

Profesor

Gracias 💪

Daniel Moreno

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.

Jimmy Buriticá Londoño

Tienes razón

Jorge Chaux

Es cierto. Gracias.

fredic yohany rojas

Hola, duda. Si title es un método, porque colocarlo en computed y no en methods?

Gracias.

Jesus David Duarte

Buena pergunta yo tambien e la hice, pero leyendo la documentacion computed y methods son muy similares, en el ejemplo que hizo el profesor no se pudo apreciar mucho sus diferencias con methods, pero basicamente la propiedad computed guarda en cache el dato que esta retornando de esta forma cada de vez se invoque no tendra que ir a buscar los datos a ningun sitio sino que ya estaran guardados en cache que a diferencia de methods no sera asi, espero que te haya podido servir mi comentario, tambien puedes leer la documentacion de la propiedad computed para informarte mucho mejor

Johan Garzon

"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.

Roberto Shirásago Domínguez

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

Ruth Lucy Campos Huamantica

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

Gonzalo Pimentel

Me esta gustando la simpleza de Vue....

Fernando Andres Muñoz Suazo

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)
    }
  }

Juan Pablo Jimenez

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.

Cristian Córdova

Los watchers me han recordado al hook useEffect de React

Angel Bulnes

En específico el comportamiento del componentDidUpdate()

Daniel Hidalgo

Recomiendas que tome el curso de React o me quedo con Vue?... he leído en varios foros de muchos usuarios que han usado ambos y la mayoría están más contentos con Vue.

Deivi Alfredo Arocutipa Serrano

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

Jaime Ortiz

Los objetos de Vue

new Vue({
el:'',
data(),
watch:{},
computed:{}
methods:{}})

son predefinidos por el framework o Nacho está poniendo nombres al azar? Todo eso está en la documentación oficial?

Alex Camacho

Todo lo que estas mostrando ahí esta definido por vue, menos el 'el' este es una convención nada mas.

Franz Pool Nuñez Villazana

No se porque me sale este error

vue.js:634 [Vue warn]: Property or method "price_day" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)

Funciona el código pero me sale este error cada vez que hago algo en la consola

Massimo Di Berardino

¡Hola @norbil123! El error te indica que la propiedad o método "price_day" no está definida en la instancia pero es referenciada al momento de renderizar, verifica que no tengas algún typo en el nombre de la propiedad o método

Introducción

Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web

Vue.js: Desarrollo de Aplicaciones Web Profesionales

Creación de aplicaciones reactivas con Vue.js y HTML

Rendering Declarativo y Manipulación de DOM

Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados

Uso de Expresiones JavaScript en Plantillas de Vue.js

Directivas para Atributos Dinámicos en HTML con Vue.js

Directivas de Renderizado Condicional en HTML con Vue.js

Uso de la Directiva v-for en Vue.js para Renderizar Listas

Manejo de Eventos en Vue.js: Click y Mouseover

Condiciones y Clases Dinámicas en Vue.js

Estilos Dinámicos en JavaScript: Cambios de Color Interactivos

Propiedades Computadas y Watchers en Vue.js

Interacción dinámica con formularios y directivas en Vue.js

"Crear un Tracker de Cursos con Vue.js"

Sistema de Componentes

Sistema de Componentes en Fren Word: Modularización y Reutilización

Creación de Componentes Personalizados en Vue.js

Comunicación entre Componentes en Vue.js: Props y Data Binding

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

Uso de Slots para Inyectar HTML en Componentes Hijos

Ciclo de Vida de Componentes en Vue.js

Componentes de Vue: Creación y Gestión Eficiente

Componente Modal y Componente Principal en Vue.js

Ambiente de Desarrollo

Configuración Profesional de Vue.js con Visual Studio Code

Creación de Aplicaciones con Dios CLI y su Configuración Básica

Componentes de Archivo Único en Vue.js

Comandos esenciales para proyectos con Vue CLI y configuración de entorno

Platzi Exchange

Instalación y configuración de Tailwind CSS en proyectos HTML

Creación y Gestión de Componentes VUE en Proyectos Web

Creación de Aplicaciones SPA con Vue Router

Uso de Fetch API para Interactuar con Servidores HTTP

Filtros y Directivas para Mejorar Interfaces en JavaScript

Creación de Rutas Dinámicas en Vue.js para Criptomonedas

Navegación Dinámica y Programática en Vue.js

Integración de Componentes de Terceros en Proyectos Vue.js

Manejo de Problemas de Reactividad en Vue.js

Filtros y Ordenamiento en Tablas de Datos con JavaScript

Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js

¡A producción!

Publicación de Aplicaciones con Git y Netlify

Rendering Declarativo y Manipulacion de DOM

Propiedades Computadas y Watchers en Vue.js