Qué son los watchers de Vue

Contenido del curso

Introducción

CLI y Dev Tools

Manipulación del DOM

REST y HTTP

Sistema de Componentes

Vue Router

Extendiendo VueJS

Clases, Animaciones y Transiciones36

38
Animaciones CSS3 con transiciones en Vue
06:54 min

Vuex

Nuxt.js

Deploy a Producción con Now

Conclusiones

50
Cómo hacer deploy de tu app Vue.js
00:49 min

Bonus

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:002:25

Qué son los watchers de Vue

Curso Profesional de Vue.js 2

Clase 16 de 53

Clase 16 / 53

Comentarios (15)15 comentarios

Carlos Eduardo Gomez García

Hace 6 años

Los watchers son funciones que se ejecutan cada vez que una propiedad cambia, deben llamarse igual que la propiedad a la que vamos a vigilar, y esto permite ejecutar un código que necesitemos:D

Juan Carlos Correa Herrera

Hace 9 años

Aquí el ejemplo de watch + computed + manejo de atributos según el ejercicio anterior:

<template lang="pug">
  #app
    label(for='yearBirthday') Año de nacimiento
    input(v-model="yearBirthday" id='yearBirthday')
    p(v-if="yearBirthday") Tú edad: {{ age }}
    p Valor anterior: {{ oldVal }}
    p Valor nuevo: {{ newVal }}
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      yearBirthday: 0,
      oldVal: 0,
      newVal: 0
    }
  },

  /**
   * funciones que generan nuevas propiedades del componente en base a otras propiedades.
   * Deben ser funciones, se pueden usar como expresiones en la UI
   */
  computed: {
    age () {
      return (new Date().getFullYear()) - this.yearBirthday
    }
  },

  /**
   * Semejante al patrón Observer
   * No devuelven un valor, no son propiedades y tampoco pueden ser usadas en propiedades
   */
  watch: {
    age (newVal, oldVal) {
      console.log(newVal, oldVal)
      this.oldVal = oldVal
      this.newVal = newVal
    }
  }
}
</script>

Nacho Anaya

Profesor

Hace 9 años

Excelente!

Juan Carlos Correa Herrera

Hace 9 años

También se puede usar un whatcher con valores de computed ya que son atributos creados de otros atributos del modelo. Si en este ejemplo se usase fullname, también funcionaría : o

marco antoni condori chipana

Hace 8 años

DESCRIPCIÓN WATCHERS

Mauricio Hernan Cabrera

Hace 9 años

y si quiero añadir un watch a un objeto, como lo haria?

Mauricio Hernan Cabrera

Hace 9 años

Muchas gracias por contestar Ianaya 😃, pense que no se podia hacer watch a objetos

Jafet López Chaves

Hace 8 años

gran aporte! 😎

jonathan sanchez

Hace 7 años

Los Watchers nos permiten ejecutar código a partir de que una propiedad de nuestro View Model cambia. A diferencia de las Computed Properties no devuelven un valor, no son propiedades y tampoco pueden ser utilizadas en expresiones.

Alejandro Demetrio Cortez Alvarez

Hace 8 años

instale el eslint conforme al curso pero me estoy percatando de que no lintea los archivos .vue sololos .js alguien me puede decir ¿por qué?

Ivan Toro

Hace 8 años

¿Tienes la rule de la siguiente forma?

{
	test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [path.resolve(__dirname, './src')]
},

Alejandro González Reyes

Hace 7 años

Se me ocurre una función de watch en las opciones de suscripcion de platzi. Cuando el usuario activa cancelar su suscripcion el valor cambia y por tanto se debe observar ese cambio para mostrarle un aviso del porque de su decisión. WOOW

Yomar Esteban Miranda Sarmiento

Hace 9 años

Los watchers se enlazan directamente sobre una variable del view model, por lo cual se tienen que llamar de la misma manera.

Yomar Esteban Miranda Sarmiento

Hace 9 años

Los Watchers nos permite ejecutar código a partir de que una propiedad de nuestro view model cambia. A diferencia de las Computed Properties no devuelven un valor, no son propiedades y tampoco pueden ser utilizadas en expresiones.

Julian David Calvachi Gómez

Hace 7 años

<template lang="pug">
  #app
    input(v-model="yearBorn", placeholder="año de nacimiento")
    p tienes {{yearsOld}} años.
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      name: '',
      lastname: '',
      actualYear: 2019,
      yearBorn: null
    }
  },
  computed: {
    yearsOld: function () {
      return parseInt(this.yearBorn) - parseInt(this.actualYear)
    }
  }
}
</script>

<style lang="scss">
  @import './css/main.scss'
</style>

Eva Valle Molina

Hace 8 años

Me recuerda a los keyloggers :/

Flor Viviana Mireles Rivera

Hace 9 años

esto se puede usarse cuando cambias tus datos de un formulario ?

Diego Forero

Team Platzi

Hace 9 años

Si, es si principal uso, por ejemplo el hacer un llamado a un API para ir filtrando los resultados.

Nicolas Gonzalez

Hace 8 años

Para aquellos que quieren utilizar esto para implementarlo en el ejercicio anterior.

<template>
    <div class="columns">
        <div class="column">
           <input v-model="Fecha" type="number">
           <input v-model="edad" type="number">
            <p v-show="se">{{ años }}</p>
        </div>
    </div>
</template>

<script>
export default {
  name: 'box',    
  data () {
    return {
        edad: ' ' ,
        Fecha: 2018,//acá se agregaría código para no 				 
//tener que cambiar el año cada tanto
        se: false
   }
 },
  computed: {
      años () {
          return this.Fecha - this.edad 
      }
  },
  watch: {
      edad (keydown) {//es importante mencionar que es down y no up... dawn es cada ves que apretó y up recién llama cuando levanto la mano de la tecla
          this.se = true
          console.log('algo cambio')
      }
  }    
}
</script>

Jafet López Chaves

Hace 8 años

que bueno que esta en HTML haha

Esteban Javier Gold Muros

Hace 6 años

También se los puede utilizar con las computed properties

Recursos

Domina los watchers para reaccionar a cambios en tu view model. Aprende qué son, cómo declararlos y cuándo usarlos para desencadenar código sin agregar complejidad. Aquí verás su diferencia con las computed properties, cómo acceder al valor nuevo y viejo, y un caso típico: llamadas HTTP desde un input de búsqueda.

Watchers y computed: qué cambia y cuándo usarlos

Los watchers son similares a las computed properties, pero cumplen otro rol: reaccionan a cambios. No devuelven valor, no son propiedades y no pueden usarse en expresiones. En cambio, ejecutan funciones cuando una variable del view model cambia.

¿Qué diferencia a un watcher de una computed property?

Un watcher no devuelve un valor.
No es una propiedad; es una función que reacciona a cambios.
No se usa en expresiones del template.
Se dispara cuando cambia una variable del view model.
Facilita un patrón observable para ejecutar lógica al modificar datos.

¿Cómo se enlaza un watcher correctamente?

Se define dentro de un objeto watch.
Debe llamarse igual que la variable del view model que observa.
Cada propiedad en watch es una función del mismo nombre que la variable.

Declaración y enlace: cómo crear un watcher

Para empezar, se crea un objeto watch como con computed. Si observas una variable name, el watcher debe llamarse name. Dentro, la función recibe dos argumentos: nuevo valor y valor anterior; así puedes comparar y actuar.

¿Cómo declarar el objeto watch y sus funciones?

export default {
  data() {
    return { name: '' };
  },
  watch: {
    name(newVal, oldVal) {
      console.log('nuevo:', newVal);
      console.log('anterior:', oldVal);
    }
  }
};

¿Qué parámetros recibe un watcher?

newVal: el valor nuevo tras el cambio.
oldVal: el valor anterior antes del cambio.
Puedes imprimirlos en la console para verificar el flujo.
Útil al probar mientras compila webpack y observas resultados.

Casos prácticos: llamadas HTTP y entradas de usuario

Un uso común es reaccionar a cambios en un input y lanzar una llamada HTTP. Por ejemplo, en un campo de búsqueda, cada tecla puede disparar una función para refrescar resultados en tiempo real.

¿Cómo usar watchers para búsquedas en tiempo real?

Observar la variable enlazada al input de búsqueda.
En cada cambio, desencadenar una llamada HTTP.
Actualizar resultados con el valor nuevo.
Mantener registro del valor anterior si necesitas comparar.

¿Qué sigue con eventos del usuario?

Próximo paso: aprender eventos y cómo enlazarlos para ejecutar acciones.
Combinar watchers y eventos potencia la interacción del usuario.

¿Tienes dudas sobre cómo estructurar tus watchers o qué observar en tu view model? Cuéntame en los comentarios y vemos tu caso concreto.

Introducción

Aplicaciones profesionales con Vue.js

Vue como framework progresivo y reactivo

CLI y Dev Tools

Instalación de Vue.js: Node, Dev Tools y CLI

Crear una aplicación Vue con CLI y webpack

Cómo funciona webpack.config.js

Babel: transpilador de JavaScript moderno

ESLint con Standard JS: linteo automático en webpack

Configuración de Sass y Bulma en Vue

Cómo configurar Pug en Vue con webpack

Diseño de Mockups: Práctica y Colaboración en Comunidad

Creación de Vistas con Mockups y Vue.js

Manipulación del DOM

Expresiones en Vue: sintaxis doble llave

Diferencia entre v-show y v-if en el DOM

Qué es data binding en Vue.js

Computed properties en Vue.js: cómo crearlas

Qué son los watchers de Vue

Eventos Vue: directiva v-on y métodos format

Cómo construir una interfaz de búsqueda completa en Vue

Manipulación del DOM con Vue.js: Práctica y Ejercicios

REST y HTTP

Creando servicios HTTP con Fetch API

Configurar Trae con Fetch para peticiones HTTP

Cómo conectar servicios a componentes Vue

Sistema de Componentes

Cómo crear componentes en Vue

Componentes Layout en Vue con Bulma

Reactividad en Vue: $set y Object.assign

Hooks del ciclo de vida en Vue.js

Comunicación padre-hijo con props en Vue

Eventos en Vue: comunicar hijo a padre

Slots: HTML dinámico en componentes Vue

Plugin Event Bus: comunicar componentes sin relación en Vue

Vue Router

Vue Router para single page applications

Instalación de View Router paso a paso

<target-language> Spanish </target-language> Navegación programática con Vue Router

Extendiendo VueJS

Vue modifiers: cómo simplificar eventos

Filtros en Vue: conversión milisegundos a minutos

Directivas personalizadas en Vue: v-blur

Mixins Vue: compartir lógica entre componentes

Clases, Animaciones y Transiciones36

Animaciones CSS3 con transiciones en Vue

Vuex

Cómo Vuex centraliza estados en Vue

Instalación de Vuex con estado único

Cómo usar mutations y commit en Vuex

Getters de Vuex: mapGetters y store sincronizado

Cómo dispatch ejecuta actions asincrónicas en ViewX

Instalación de Viewex en Platzi Music

Nuxt.js

Server Side Rendering: ventajas y limitaciones

Instalación y configuración de Next.js en View

Copiar componentes Vue.js a Nuxt con SSR

Deploy a Producción con Now

Instalación y login de Now para Vue.js

Deploy de aplicación React con Now

Conclusiones

Cómo hacer deploy de tu app Vue.js

Bonus

Internacionalización con Vue I18n: configurar multiidioma

Configuración de unit tests en Vue con webpack

JWT con Vue Router: autenticación completa

Qué son los watchers de Vue