> For the complete documentation index, see [llms.txt](https://d-ukolov.gitbook.io/vue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://d-ukolov.gitbook.io/vue/basics/cikly/otslezhivanie-izmenenii-v-massivakh.md).

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

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

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

* `push()`
* `pop()`
* `shift()`
* `unshift()`
* `splice()`
* `sort()`
* `reverse()`

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

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

```javascript
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`

Например:

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

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

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

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

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

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

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

```javascript
vm.items.splice(newLength)
```