Какие методы массивов во vue запускают обновление отображения?vue-11

В Vue.js реактивность для массивов работает особым образом. Vue перехватывает вызовы некоторых методов массива, чтобы автоматически обновлять отображение. Эти методы называются "мутационными" (изменяющими исходный массив).

1. Мутационные методы

Следующие методы изменяют исходный массив и автоматически вызывают перерендеринг:

push()      // Добавляет элемент(ы) в конец массива
pop()       // Удаляет последний элемент
shift()     // Удаляет первый элемент
unshift()   // Добавляет элемент(ы) в начало массива
splice()    // Добавляет/удаляет элементы по указанному индексу
sort()      // Сортирует элементы массива
reverse()   // Переворачивает порядок элементов

Пример:

methods: {
  addItem() {
    this.items.push(newItem); // Автоматически обновит отображение
  }
}

2. Немутационные методы

Эти методы возвращают новый массив и не изменяют исходный, поэтому Vue их не перехватывает:

filter()    // Возвращает новый отфильтрованный массив
concat()    // Возвращает новый объединенный массив
slice()     // Возвращает новый подмассив
map()       // Возвращает новый преобразованный массив

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

methods: {
  updateItems() {
    // Неправильно - не вызовет обновления:
    // this.items.filter(item => item.isActive);

    // Правильно:
    this.items = this.items.filter(item => item.isActive);
  }
}

3. Особые случаи

Прямое изменение по индексу

this.items[index] = newValue; // Не вызовет обновления

Решение:

Vue.set(this.items, index, newValue);
// Или в Vue 3:
this.items[index] = newValue;
this.items = [...this.items]; // Создаем новый массив

Изменение длины массива

this.items.length = newLength; // Не вызовет обновления

Решение:

this.items.splice(newLength);

4. Vue.set и Vue.delete

Для гарантированного обновления можно использовать:

Vue.set(this.items, index, value); // Для добавления/изменения
Vue.delete(this.items, index);    // Для удаления

В Vue 3 эти методы доступны через глобальное API.

Резюмируем

Vue автоматически отслеживает и реагирует на: ✔ Все мутационные методы массивов (push, pop, splice и др.)
✔ Присваивание нового массива переменной
✔ Использование Vue.set/Vue.delete

Не вызывают автоматического обновления: ✖ Немутационные методы (без присваивания)
✖ Прямое изменение по индексу
✖ Изменение свойства length

Для сложных операций с массивами всегда используйте подходы, которые гарантируют реактивное обновление.

Вопросы

Собеседования