Отслеживание изменений в массивах

Методы внесения изменений

Vue оборачивает у наблюдаемого массива методы внесения изменений, чтобы они вызывали обновления представления. Оборачиваются следующие методы:

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

Замены в массиве

Методы внесения изменений изменяют оригинальный массив, на котором они вызываются. Существуют и неизменяющие методы, такие как filter(), concat() и slice(), они не вносят изменений в изначальный массив, а всегда возвращают новый массив. При работе с неизменяющими методами можно просто заменять старый массив на новый:

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

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

Предостережения

Из-за ограничений JavaScript, Vue не способен отследить следующие изменения в массиве:

1. Прямую установку элемента по индексу: vm.items[indexOfItem] = newValue

2. Явное изменение длины массива: vm.items.length = newLength

Например:

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // НЕ РЕАКТИВНО
vm.items.length = 2 // НЕ РЕАКТИВНО

Решить первую проблему можно двумя способами, оба дадут эффект аналогичный vm.items[indexOfItem] = newValue, плюс запустят реактивные обновления состояния приложения:

// Использовать Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Использовать Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

Можно использовать метод экземпляра vm.$set, который является псевдонимом для глобального Vue.set:

vm.$set(vm.items, indexOfItem, newValue)

Для решения второй проблемы можно использовать splice:

vm.items.splice(newLength)