Пример с фильтрами объекта (поле name и другие) - как использовать reactive для отслеживания изменений отдельных свойств?

Во Vue reactive отслеживает чтение и запись свойств объекта. Для наблюдения конкретного поля передайте watch getter, например () => filters.name.

Короткий ответ

Что ответить на собеседовании

Во Vue reactive отслеживает чтение и запись свойств объекта. Для наблюдения конкретного поля передайте watch getter, например () => filters.name.

Подробный разбор

Ответ с пояснениями

Во Vue reactive отслеживает чтение и запись свойств объекта. Для наблюдения конкретного поля передайте watch getter, например () => filters.name.

const filters = reactive({ name: '', status: 'all' });
watch(() => filters.name, (name, previous) => {
  console.log({ name, previous });
});

Для нескольких полей можно передать массив getters. Деструктурирование строки const { name } = filters создаст отдельное значение, а не связанную ссылку; при необходимости используйте toRef/toRefs. Реальные запросы из watcher требуют защиты от гонок.

ИИ-помощник для собеседований

Хочешь уверенно проходить собеседования?

Попробуй ИИ-помощник для собеседований: слышит вас и собеседника, анализирует экран, подсказывает ответы в реальном времени, работает без VPN и не попадает в захват экрана.

Подробнее