Как мы знаем, вычисляемые свойства удобны, но есть несколько вариантов использования, когда вам потребуется присутствие наблюдателя при изменении значения свойства. Наблюдатель полезен для связывания данных, обнаружения изменений и реагирования на них, когда это необходимо. Это поможет вам реагировать на изменения в данных. Большинство функций Async обрабатываются наблюдателями в Vue.js. Вы можете просмотреть предыдущее руководство, чтобы понять, как работают вычисляемые свойства. Давайте начнем с простого примера, который позволит вам запускать живые часы на экране. Мы сделаем часы, меняющие цвет, используя генератор шестнадцатеричного кода. Код выглядит следующим образом

‹div id="приложение"› {{дата}} ‹/div›

var app = new Vue({
  el: '#app',
  data: {
    date: ''
  },
  created: function() {
    this_1 = this;
    setInterval(function() {
      var time = new Date();
      this_1.date = time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
    }, 1000)
  },
  watch: {
    date: function(val) {
      var div = document.getElementById('app').style.backgroundColor = '#' + intToRGB(hashCode(val + val.split(':')[2]));
      console.log()
    }
  }
});

В приведенном выше коде мы меняем дату каждую секунду и вычисляем время, а затем время обновляет свойство даты, с другой стороны, всякий раз, когда происходит это асинхронное изменение, мы продолжаем и обновляем цвет фона приложения. Код для генерации цветов выходит за рамки этой статьи и описан в руководствах по JavaScript. Вы можете взглянуть на это. Но весь смысл этой статьи в том, чтобы показать, как наблюдатель за определенным свойством имеет то же имя, что и свойство, и получает обновления по мере изменения свойства. Этот триггер можно использовать в разных местах, но мы используем его для изменения цвета самого приложения. Образец GIF показан ниже. В качестве альтернативы вы также можете взглянуть на код JSFiddle.

Наблюдатели Vue.js для асинхронных обновлений

Вывод

Таким образом, мы можем сделать вывод, что наблюдатели необходимы для того, чтобы приложение реагировало на различные асинхронные события. Приведенный выше пример устанавливает основу для того, как мы можем использовать наблюдателей, чтобы реагировать на асинхронные вызовы. Как вы думаете, могут быть другие утилиты Watchers. Можете ли вы назвать какие-нибудь события, где наблюдатели пригодятся?

Первоначально опубликовано в The Web Juice.