Реактивность в фреймворке 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.

Дано свойство text, в котором хранится текст '12345'. Выведите содержимое свойства text в каком-нибудь абзаце. Дана также кнопка. Сделайте так, чтобы по нажатию на кнопку текст в нашем абзаце мгновенно поменялся с '12345' на 'abcde'.

Изменения массива на лету

Реактивность очень гибкая штука - она срабатывает даже при изменениях массивов, выводимых через 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>

Запустите этот код сами - вы увидите, как по нажатию на кнопку в конец списка каждый раз добавляется новый пункт.

Дана кнопка. Дан массив. Выведите элементы этого массива в виде списка ul. Сделайте так, чтобы по нажатию на кнопку в конец этого списка добавился новый пункт с текстом '!!!'.

Дана кнопка. Дан массив. Выведите элементы этого массива в виде списка ul. Сделайте так, чтобы каждый раз по нажатию на кнопку из массива удалялся первый элемент и соответствующие изменения мгновенно отображались в нашем списке ul.

Модифицируйте предыдущую задачу так, чтобы удалялся не первый элемент, а последний.

Доступные методы

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

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

Дана кнопка. Дан массив. Выведите элементы этого массива в виде списка ul. Сделайте так, чтобы по нажатию на кнопку пункты списка стали в обратном порядке.

Дана кнопка. Дан массив. Выведите элементы этого массива в виде списка ul. Сделайте так, чтобы по нажатию на кнопку пункты списка отсортировались в алфавитном порядке.

Необычные методы

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

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

items = items.concat([1, 2, 3]);

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

Дана кнопка. Дан массив с числами. Выведите элементы этого массива в виде списка ul. Сделайте так, чтобы по нажатию на кнопку на экране остались только те элементы, число в которых больше 0, но меньше 10. Для решения используйте метод filter.

Исключения

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