Реактивность в 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>
Vue поддерживет не только добавление элемента массива через "push", но и другие методы работы с ними: pop, shift, unshift, splice, sort, reverse. Некоторые методы не изменяют первоначальный массив (slice, concat, filter), поэтому для их правильной обработки в Vue необходимо переназначать исходный массив: this.items = this.items.slice(0, 2);
Vue не способен отслеживать изменения внутри массивов напрямую. К примеру, изменение элемента массива напрямую через item['ключ'] = 'значение';. К исключениям ещё относится и изменение длины массива item.length = 'значение_длины';
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: