Vue.js: Обработанные свойства (Computed) для начинающих

Обработанные свойства (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 внутри обработанных свойств расширяет их функциональность.

Что будем искать? Например,программа