Сталкивались ли вы во Vue с понятием потери реактивности?

Да, сталкивался. Потеря реактивности во Vue 2 возникала в основном в двух случаях:

1. Добавление нового свойства к существующему объекту напрямую. Vue 2 отслеживает изменения только для свойств, которые присутствовали в объекте на момент его создания.
2. Модификация массива по индексу или изменение его длины. Vue 2 не мог реактивно отслеживать такие изменения напрямую.

Для решения этих проблем использовались методы $set для объектов и методы-мутаторы массива (push, pop, shift, unshift, splice, sort, reverse) или методы на основе splice для замены элементов/изменения длины.

// Потеря реактивности при добавлении свойства
const obj = { a: 1 };
// obj.b = 2; // Не реактивно в Vue 2

// Решение с $set
// Vue.$set(obj, 'b', 2);

// Потеря реактивности при изменении массива по индексу
const arr = [1, 2, 3];
// arr[0] = 4; // Не реактивно в Vue 2

// Решение с методами-мутаторами
// arr.splice(0, 1, 4);

// Решение с $set для массивов (реже используется, но возможно)
// Vue.$set(arr, 0, 4);

В Vue 3 с использованием Composition API и reactive/ref, а также с улучшенным прокси-based реактивным движком, эти проблемы в значительной степени решены. Добавление свойств к реактивным объектам и изменение массивов по индексу или их длины становятся реактивными по умолчанию.

// Vue 3
import { reactive } from 'vue';

const obj = reactive({ a: 1 });
obj.b = 2; // Реактивно в Vue 3

const arr = reactive([1, 2, 3]);
arr[0] = 4; // Реактивно в Vue 3
arr.length = 1; // Реактивно в Vue 3

Тем не менее, понимание причин потери реактивности в Vue 2 полезно при работе с устаревшим кодом или при переходе между версиями.