Вычисляемые свойства Vue

Мы уже знакомы с настройками data, filters, methods. В этой статье поговорим об ещё одной настройке "computed". Это настройка предназанчена для создания вычисляемых свойств. Как и в "methods" тут хранятся функции.

В будущих статьях мы подробнее разберём разницу между настройками "methods" и "computed". С первого взгляда можно подумать, что настройки "methods" и "computed" одинаковые. Но отличий много. К примеру, "computed" выполняется при изменении переменных, а результаты вычислений кешируются, чтобы улучшить производительность. А "methods" приходится вызывать вручную и кеширования нет.

Настройка computed

Попробуем сделать пример, в котором используем функцию из настройки "computed":

<div id="application">
   <div>{{ text }}</div>
   <div>{{ addText }}</div>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         text: 'Тише, мыши',
      },
      computed: {
         addText: function() {
            return this.text + ', кот на крыше';
         },
      },
   });
</script>

Результатом выполнения такого кода будет две строки текста:

<div id="application">
   <div>Тише, мыши, кот</div>
   <div>Тише, мыши, кот на крыше.</div>
</div>

Реактивность настройки computed

Vue самостоятельно пересчитывает данные в "computed" при изменении входных параметров. Попробуем продемонстрировать это, сделав пример с полем для ввода текста:

<div id="application">
   <input v-model="text">
   <div>{{ text }}</div>
   <div>{{ addText }}</div>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         text: '',
      },
      computed: {
         addText: function() {
            return this.text + ', кот на крыше';
         },
      },
   });
</script>

Загрузите страницу с таким кодом и попробуйте ввести любой текст в текстовое поле. Ниже, в первом блоке div будет показан введёный текст без изменений. А во втором div к тексту будет добавлено окончание ", кот на крыше". Причём изменения в div контейнерах будут происходить по мере набора текста в поле. В этом и состоит реактивность: vue отслуживает состояние переменных и пересчитывает значения в настройке "computed".