Хотя в большинстве случаев лучше использовать вычисляемые свойства, иногда необходимы пользовательские методы-наблюдатели. Поэтому Vue предоставляет более общий способ реагирования на изменения в данных через опцию watch. Эта возможность полезна для «дорогих» или асинхронных операций, выполняемых в ответ на изменение данных.
Рассмотрим пример:
Результат:
В данном случае использование опции watch позволило выполнять асинхронную операцию (обращение к API), ограничивать частоту выполнения этой операции и устанавливать промежуточные состояния до получения ответа от сервера. Ничего из этого не удалось бы достичь с помощью вычисляемых свойств.
Кроме опции watch можно также использовать в императивном стиле.
<div id="watch-example">
<p>
Задайте вопрос, на который можно ответить «да» или «нет»:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
<!-- Поскольку уже существует обширная экосистема ajax-библиотек -->
<!-- и библиотек функций общего назначения, ядро Vue может -->
<!-- оставаться маленьким и не изобретать их заново. Кроме того, -->
<!-- это позволяет вам использовать только знакомые инструменты. -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'Пока вы не зададите вопрос, я не могу ответить!'
},
watch: {
// эта функция запускается при любом изменении вопроса
question: function (newQuestion, oldQuestion) {
this.answer = 'Ожидаю, когда вы закончите печатать...'
this.debouncedGetAnswer()
}
},
created: function () {
// _.debounce — это функция lodash, позволяющая ограничить то,
// насколько часто может выполняться определённая операция.
// В данном случае мы ограничиваем частоту обращений к yesno.wtf/api,
// дожидаясь завершения печати вопроса перед отправкой ajax-запроса.
// Узнать больше о функции _.debounce (и её родственнице _.throttle),
// можно в документации: https://lodash.com/docs#debounce
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Вопросы обычно заканчиваются вопросительным знаком. ;-)'
return
}
this.answer = 'Думаю...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Ошибка! Не могу связаться с API. ' + error
})
}
}
})
</script>
