Наблюдатели Vue.js

Наблюдатель Vue позволяет вам прослушивать данные компонента и запускать его всякий раз, когда изменяется конкретное свойство.

Наблюдатель - это специальная функция Vue.js, которая позволяет вам следить за одним свойством состояния компонента и запускать функцию при изменении значения этого свойства.

Вот пример. У нас есть компонент, который показывает имя и позволяет вам изменить его, нажав кнопку:

<template>
  <p>My name is {{name}}</p>
  <button @click="changeName()">Change my name!</button>
</template>

<script> export default { data() { return { name: ‘Flavio’ } }, methods: { changeName: function() { this.name = ‘Flavius’ } } } </script>

Когда имя меняется, мы хотим что-то сделать, например, распечатать журнал консоли.

Мы можем сделать это, добавив кwatchобъект свойство, названное как свойство данных, за которым мы хотим наблюдать:

<script>
export default {
  data() {
    return {
      name: 'Flavio'
    }
  },
  methods: {
    changeName: function() {
      this.name = 'Flavius'
    }
  },
  watch: {
    name: function() {
      console.log(this.name)
    }
  }
}
</script>

Функция, возложенная наwatch.nameопционально может принимать 2 параметра. Первый - это новое значение свойства. Второй - это старое значение свойства:

<script>
export default {
  /* ... */
  watch: {
    name: function(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  }
}
</script>

Наблюдателей невозможно найти по шаблону, как по вычисленным свойствам.

Скачать мою бесплатнуюСправочник по Vue


Больше руководств по vue: