Vue.js

# Métodos de Instancias

# $watch

  • Argumentos:

    • {string | Function} source
    • {Function | Object} callback
    • {Object} options (opcional)
      • {boolean} deep
      • {boolean} immediate
      • {string} flush

  • Retorna: {Function} unwatch

  • Uso:

    Observar los cambios de una propiedad reactiva o una función computada en la instancia de componente. El callback será llamado con el valor nuevo y viejo para la propiedad dada. Podemos solo pasar nombres de las propiedades de nivel superior data, props, o computed como una cadena de caracteres. Para más expresiones complejas o propiedades anidadas, utilice una función en su lugar.

  • Ejemplo:

    const app = createApp({
  data() {
    return {
      a: 1,
      b: 2,
      c: {
        d: 3,
        e: 4
      }
    }
  },
  created() {
    // nombre de una propiedad de nivel superior
    this.$watch('a', (newVal, oldVal) => {
      // hacer algo
    })

    // función para observar una sola propiedad anidada
    this.$watch(
      () => this.c.d,
      (newVal, oldVal) => {
        // hacer algo
      }
    )

    // función para observar una expresion compleja
    this.$watch(
      // cada vez la expresión `this.a + this.b` produce un resulto diferente,
      // el manejador será llamado. Es como si estuviéramos observando una propiedad
      // computada sin definir la propiedad computada mísma
      () => this.a + this.b,
      (newVal, oldVal) => {
        // hacer algo
      }
    )
  }
})
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37

    Cuando el valor observado es un objeto o matriz, cualquieres cambios a sus propiedades o elementos no dispararán el observador porque se refieren al mismo objeto/matriz:

    const app = createApp({
  data() {
    return {
      article: {
        text: '¡Vue es genial!'
      },
      comments: ['¡De verdad!', 'Estoy de acuerdo']
    }
  },
  created() {
    this.$watch('article', () => {
      console.log('El artículo ha cambiado!')
    })

    this.$watch('comments', () => {
      console.log('Los comentarios han cambiado!')
    })
  },
  methods: {

    // Estos métodos no dispararán un observador porque cambiamos solo una propiedad del objeto/matriz,
    // en vez de sí mísmo
    changeArticleText() {
      this.article.text = 'Vue 3 es genial'
    },
    addComment() {
      this.comments.push('Nuevo comentario')
    },

    // Estos métodos dispararán un observador porque reemplazamos el objeto/matriz completamente
    changeWholeArticle() {
      this.article = { text: 'Vue 3 es genial' }
    },
    clearComments() {
      this.comments = []
    }
  }
})
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38

    $watch retorna una función de quitar observación (unwatch) que deje disparar el callback:

    const app = createApp({
  data() {
    return {
      a: 1
    }
  }
})

const vm = app.mount('#app')

const unwatch = vm.$watch('a', cb)
// luego, derrumba el observador
unwatch()
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

  • Opción: deep

    Para también detectar cambios de valores anidados dentro de objetos, necesita pasar deep: true en el argumento de opciones. Esta opción también puede ser utilizada para observar mutaciones de matriz.

    Note que cuando mute (en vez de reemplace) un objeto o matriz y observe con la opción deep, el valor viejo será igual como el valor nuevo porque se refieren al mismo objeto/matriz. Vue no posee una copia del valor antes de que se mute.

    vm.$watch('someObject', callback, {
  deep: true
})
vm.someObject.nestedValue = 123
// callback es disparado
    1
    2
    3
    4
    5

  • Opción: immediate

    Pasar immediate: true en la opción disparará el callback inmediatamente con el valor actual de la expresión:

    vm.$watch('a', callback, {
  immediate: true
})
// `callback` es disparado inmediatamente con el valor actual de `a`
    1
    2
    3
    4

    Note que con opción immediate no será capaz de quitar la observación a una propiedad dada en la primera llamada de callback.

    // Este resultará un error
const unwatch = vm.$watch(
  'value',
  function() {
    doSomething()
    unwatch()
  },
  { immediate: true }
)
    1
    2
    3
    4
    5
    6
    7
    8
    9

    Si todavía quiere llamar una función de quitar observación dentro del callback, debería comprobar su disponibilidad primero:

    let unwatch = null

unwatch = vm.$watch(
  'value',
  function() {
    doSomething()
    if (unwatch) {
      unwatch()
    }
  },
  { immediate: true }
)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

  • Opción: flush

    La opción flush permite un mayor control sobre la temporizción del callback. Puede establecerse como 'pre', 'post' o 'sync'.

    El valor por defecto es 'pre', lo que especifica que el callback debe ser invocado antes de la renderización. Este permite que el callback actualice otros valores antes de que se ejecute la plantilla.

    El valor 'post' puede ser utilizado para diferir el callback hasta después de la renderización. Este debería ser utilizado si el callback necesite acceso al DOM actualizado o los componentes hijos mediante $refs.

    Si flush se establece como 'sync', el callback será llamado sincrónicamente, tan pronto como se cambie el valor.

    Para 'pre' y 'post', el callback es amortiguado utilizando una cola. El callback será agregado a la cola una sola vez, incluso si el valor observado se ha cambiado múltiples veces. El valor intermedio se omitirá y no se pasará al callback.

    Amortiguar el callback no solo mejorar el rendimiento sino también ayuda a asegurarse la consistencia de dato. Los observadores no serán disparados hasta que se haya terminado el código que realice las actualizaciones de dato.

    Los observadores de 'sync' deberían ser utilizados con moderación, como no poseen estos beneficios.

    Para más información sobre flush véase la temporización para tirar de la cadena de los efectos secundarios.

  • Vea también: Observadores

# $emit

  • Argumentos:

    • {string} eventName
    • ...args (opcional)

    Disparar un evento en la instancia actual. Cualquieres argumentos adicionales serán pasados a la función callback del escuchador.

  • Ejemplos:

    Utilizar $emit con solo un nombre de evento:

    <div id="emit-example-simple">
  <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>
    1
    2
    3
    const app = createApp({
  methods: {
    sayHi() {
      console.log('¡Hola!')
    }
  }
})

app.component('welcome-button', {
  emits: ['welcome'],
  template: `
    <button v-on:click="$emit('welcome')">
      Hazme clic para recibir bienvenidas
    </button>
  `
})

app.mount('#emit-example-simple')
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

    Utilizar $emit con argumentos adicionales:

    <div id="emit-example-argument">
  <advice-component v-on:advise="showAdvice"></advice-component>
</div>
    1
    2
    3
    const app = createApp({
  methods: {
    showAdvice(advice) {
      alert(advice)
    }
  }
})

app.component('advice-component', {
  emits: ['advise'],
  data() {
    return {
      adviceText: 'Cierto consejo'
    }
  },
  template: `
    <div>
      <input type="text" v-model="adviceText">
      <button v-on:click="$emit('advise', adviceText)">
        Hazme clic para enviar un consejo
      </button>
    </div>
  `
})

app.mount('#emit-example-argument')
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26

  • Vea también:

# $forceUpdate

  • Uso:

    Forzar la rerenderización de la instancia de componente. Note que no aafecta a todos componentes hijos, solo la instancia mísma y los componentes hijos con contenidos de slot insertados.

# $nextTick

  • Argumentos:

    • {Function} callback (opcional)

  • Uso:

    Diferir la ejecución del callback hasta el próximo ciclo de actualización DOM. Utilícelo inmediatamente después de que haya cambiado unos datos para esperar la actualización DOM. Esto es lo mismo como el método global nextTick, excepto que el contexto this del callback sea vinculado automáticamente a la instancia que llame a este método.

  • Ejemplo:

    createApp({
  // ...
  methods: {
    // ...
    example() {
      // modificar dato
      this.message = 'changed'
      // DOM aún no es actualizado
      this.$nextTick(function() {
        // DOM ya es actualizado
        // `this` es vinculado a la instancia actual
        this.doSomethingElse()
      })
    }
  }
})
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

  • Vea también: nextTick

← Directivas →