Вычисляемые свойства 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".
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Cмотрите другие статьи:
Была ли статья полезной?
Была ли эта статья полезна? Есть вопрос?
хостинг для сайтов
Закажите недорогой хостинг Заказать

всего от 290 руб