Реактивность в Vue

Реактивность в Vue - это изменение зависимых элементов при изменении объекта. То есть если изменить какое-либо значение из настройки data,то это приведёт изменению элементов, к которым относится объект. Продемонстрируем это на простом примере:

<div id="application">
   {{ text }}
   <span v-on:click="changeText">Изменить текст</span>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         text: 'Тише, мыши, кот на крыше'
      },
      methods: {
         changeText: function() {
            this.text = 'А котята ещё выше';
         }
      },
   });
</script>

Если загрузить страницу с таким кодом и кликнуть на "Изменить текст", то строка "Тише, мыши, кот на крыше" изменится на "А котята ещё выше". при это обратите внимание, что функция "changeText" всего лишь изменяет текст внутри настройки "data", в переменной "text". А Vue изменяет его на странице (то есть изменяет HTML).

Реактивность с массивами и списками

В предыдущем примере было рассмоттрено реактивное поведение для текстовой переменно. Но аналогичный механизм будет срабатывать даже для списков, построенных из массивов. Попробуем сделать пример динамического добавления элемента в массив.

<div id="application">
   <ul>
      <li v-for="item in items">{{ item }}</li>
   </ul>
   <span v-on:click="addItem">Добавить строку</span>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         items: ['Тише', 'мыши', 'кот', 'на']
      },
      methods: {
         addItem: function() {
            this.items.push('крыше');
         }
      },
   });
</script>

При клике на "Добавить строку" будет срабатывать метод "addItem". который добавляет элемент в "items", в настройку "data". При этом Vue распознает изменение в массиве и добавит элемент в список. То есть при загрузке странице мы сначала увидим такой список:

<div id="application">
   <ul>
      <li>Тише</li>
      <li>мыши</li>
      <li>кот</li>
      <li>на</li>
   </ul>
   <span v-on:click="addItem">Добавить строку</span>
</div>

А после нажатия на "Добавить строку" появится элемент "крыше" в конце списка:

<div id="application">
   <ul>
      <li>Тише</li>
      <li>мыши</li>
      <li>кот</li>
      <li>на</li>
      <li>крыше</li>
   </ul>
   <span v-on:click="addItem">Добавить строку</span>
</div>