Наблюдаемые свойства

Последнее обновление: 06.08.2017

Кроме вычисляемых свойств Vue.js позволяет определять наблюдаемые свойства или watchers. Наблюдаемые свойства, как правило, применяются для выполнения асинхронных действий, особенно таких, которые могут занять продолжительное время, например, отправка запроса на сервер.

Например, определим следующую веб-страницу:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<p>Введите число:<input v-model="number"></p>
	<p>{{ result }}</p>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
		data:{
			number: '',
			result: ''
		},
		watch: {
			number: function (newNumber) {
				if(newNumber>0){
					this.factorial(newNumber);
				}
			}
		},
		methods:{
			factorial: function(newNumber){
				this.result = 'Идет вычисление факториала...';
				var vm = this;
				setTimeout(function(){
					var res = 1;
						for(var i = 1; i<=newNumber; i++){
							res = res * i;
						}
						vm.result = 'Факториал числа ' + newNumber + ' равен ' + res;
				}, 2000);
			}
		}
    });
</script>
</body>
</html>

Для создания наблюдаемого свойства используется параметр watch. В данном случае определяется наблюдаемое свойство number, которое указывает на функцию. Причем в параметре data также определяется свойство number. При изменении свойства number, которое определено в секции data, будет вызываться функция number, определенная в параметре watch. Измененное значение будет передаваться в функцию через параметр newNumber.

Функция number в зависимости от нового значения свойства number вызывает метод factorial. В этом методе устанавливается значение свойства result. Причем вначале устанавливается некоторое промежуточное значение. Затем для имитации продолжительной операции применяется функция setTimeout(), которая выполняет задержку на 2 секунды, после которой вычисляет факториал числа. И в конце вычисленный результат передается свойству result.

Поэтому при изменении числа в текстовом поле вначале мы увидим временную надпись:

watch in Vue.js

И затем и собственно результат - факториал числа:

наблюдаемые свойства во Vue.js

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850