Обработанные свойства (computed properties) — мощный инструмент в Vue.js, особенно полезный в больших приложениях, где значение одной переменной зависит от другой. Они упрощают управление данными и повышают читаемость кода.
Добавление кода и переменных
Для демонстрации работы обработанных свойств добавим текстовое поле и два абзаца. Первый абзац будет отображать значение переменной value, второй — переменной doubleValue. Ввод текста в поле будет вызывать функцию increment.
<input type="text" @input="increment($event.target.value)">
<p>{{ value }}</p>
<p>{{ doubleValue }}</p>
В main.js определим две переменные: value (с начальным значением 1) и doubleValue (также с начальным значением 1). Создадим метод increment, который принимает значение из текстового поля в качестве параметра:
data() {
return {
value: 1,
doubleValue: 1
}
},
methods: {
increment(value) {
this.value = value;
this.doubleValue = value * 2;
}
}
В этом примере doubleValue напрямую зависит от value.
Использование обработанных свойств
Вместо прямого вычисления doubleValue внутри метода increment, можно использовать обработанное свойство. Удалим переменную doubleValue из объекта data и добавим её как обработанное свойство в объект computed:
data() {
return {
value: 1,
}
},
computed: {
doubleValue() {
return this.value * 2;
}
},
methods: {
increment(value) {
this.value = value;
}
}
Теперь doubleValue вычисляется автоматически на основе значения value. В шаблоне HTML мы используем {{ doubleValue }} так же, как и ранее. Функциональность останется прежней, но структура кода станет чище и понятнее.
Расширенная функциональность: проверка введенных данных
Внутри обработанных свойств и методов Vue.js можно использовать весь синтаксис JavaScript. Добавим проверку на введенное значение:
computed: {
doubleValue() {
return this.value * 2;
}
},
methods: {
increment(value) {
this.value = value;
if (this.value === 25) {
alert('Число 25 введено');
}
}
}
Этот код выведет alert, если пользователь введет число 25.
Обработанные свойства — удобный инструмент для управления зависимостями между переменными в приложениях Vue.js. Они делают код более читаемым, поддерживают чистую архитектуру и упрощают работу с большими объемами данных. Использование синтаксиса JavaScript внутри обработанных свойств расширяет их функциональность.