\n```\n\nПаттерн интервью: \n1) читать/отображать → `computed` + немутирующие методы; \n2) писать в store → мутация (`push`) или иммутабельное присвоение (`arr.value = arr.value.filter(...)`).\n\nВажно формулировать аккуратно: «немутирующий метод сам по себе не “ломает реактивность”» — реактивность срабатывает, когда меняется отслеживаемый источник, от которого зависят эффекты.\n\nЧастый баг новичка: `const filtered = list.filter(...)` без `ref`/`computed` и ожидание, что шаблон сам узнает о `filtered`. Локальная переменная вне реактивной системы не отслеживается. Либо `computed`, либо запись в `ref`. Для Pinia то же правило: меняйте state явно."}}}

Какие немутирующие методы массива важны для реактивности?

Vue · junior · сложность 3

Войти, чтобы отмечать

Практика

Немутирующие методы массива (filter, map, slice, concat, а также современные toSorted, toReversed, toSpliced, with) не изменяют исходный массив — возвращают новый. Для реактивного UI результат нужно либо сохранить в state, либо вычислять в computed.

<script setup>
import { ref, computed } from 'vue'

const numbers = ref([1, 2, 3, 4, 5])

// производные данные — без мутации оригинала
const evens = computed(() => numbers.value.filter((n) => n % 2 === 0))
const labels = computed(() => numbers.value.map((n) => `#${n}`))

// изменение источника — новое значение в ref
function keepEvens() {
  numbers.value = numbers.value.filter((n) => n % 2 === 0)
}
</script>

Паттерн интервью:

читать/отображать → computed + немутирующие методы;
писать в store → мутация (push) или иммутабельное присвоение (arr.value = arr.value.filter(...)).

Важно формулировать аккуратно: «немутирующий метод сам по себе не “ломает реактивность”» — реактивность срабатывает, когда меняется отслеживаемый источник, от которого зависят эффекты.

Частый баг новичка: const filtered = list.filter(...) без ref/computed и ожидание, что шаблон сам узнает о filtered. Локальная переменная вне реактивной системы не отслеживается. Либо computed, либо запись в ref. Для Pinia то же правило: меняйте state явно.

Загрузка…