Реактивность в фреймворке Vue

Сейчас мы познакомимся с понятием реактивность и научимся основам ее применения.

Пусть сейчас у нас есть следующее: в свойстве message у нас хранится текст 'привет' и есть также метод changeMessage, который будучи вызванным меняет содержимое message на значение 'пока':

let app = new Vue({
el: '#app',
data: {
message: 'привет',
},
methods: {
changeMessage: function() {
this.message = 'пока';
}
}
});
Давайте теперь выведем содержимое message внутри нашего HTML, а также сделаем кнопку, по нажатию на которую вызовется метод changeMessage и содержимое message поменяется:

<div id="app">
{{ message }}
<button v-on:click="changeMessage">Поменять сообщение</button>
</div>
Теперь внимание! Что случится по нажатию на кнопку: текст мгновенно поменяется с 'привет' на 'пока'.

То есть: любое изменение данных из data приводит к мгновенному изменению отображения этих данных на странице. Такое поведение Vue называется реактивность. Реактивность является основной фишкой фреймворков типа Vue.

Изменения массива на лету
Реактивность очень гибкая штука - она срабатывает даже при изменениях массивов, выводимых через v-for. К примеру: если добавить или удалить какой-нибудь элемент из массива - вы мгновенно увидите эти изменения на странице сайта.

Давайте посмотрим на примере.

Пусть у нас в items хранится массив:

let app = new Vue({
el: '#app',
data: {
items: ['a', 'b', 'c', 'd', 'e'],
},
});
Давайте выведем его содержимое на экран в виде списка:

<div id="app">
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
Результатом этого кода будет следующий HTML:

<div id="app">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</div>
Давайте теперь сделаем кнопку, по нажатию на которую в конец этого списка добавится новый пункт. Для этого привяжем к этой кнопке метод addItem:

<div id="app">
<button v-on:click="addItem">Добавить</button>
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
Напишем реализацию метода addItem:

methods: {
addItem: function() {
this.items.push('пункт');
}
}
Давайте соберем все вместе и запустим:

let app = new Vue({
el: '#app',
data: {
items: ['a', 'b', 'c', 'd', 'e'],
},
methods: {
addItem: function() {
this.items.push('пункт');
}
}
});
<div id="app">
<button v-on:click="addItem">Добавить</button>
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
Запустите этот код сами - вы увидите, как по нажатию на кнопку в конец списка каждый раз добавляется новый пункт.

Доступные методы
Итак, практически любые изменения со массивом будут сражу же отображаться в HTML коде.

Vue поддерживает следующий список методов, для работы с массивами: push, pop, shift, unshift, splice, sort, reverse. Изменения, сделанные с помощью этих методов отслеживаются Vue и сразу видны на странице.

Необычные методы
Существуют также методы, не вносящие изменений в изначальный массив, а возвращающие новый массив. Это методы slice, concat, filter.

При работе с такими методами, вы можете просто заменить старый массив новым:

items = items.concat([1, 2, 3]);
Vue достаточно умный, чтобы отследить такие операции. Поэтому, изменения, сделанные с помощью этих методов также сразу же применятся на странице.

Исключения
Из-за ограничений JavaScript, Vue не способен заметить следующие изменения в массиве: прямую установку элемента по индексу: items[ключ] = новоеЗначение и явное изменение длины массива, например: items.length = новаяДлина.