На что навешивается Setter во Vue?

Ответ: Область применения сеттеров во Vue

Во Vue (особенно в Composition API) сеттеры (setters) — это функции, которые позволяют изменять состояние реактивных данных безопасным и контролируемым образом. Они навешиваются (применяются) на реактивные переменные и ссылки, созданные с помощью таких функций, как ref(), reactive(), computed() и watch(). Основная их цель — обеспечить валидацию, логирование или побочные эффекты при изменении данных.

Основные случаи использования сеттеров

1. В вычисляемых свойствах (computed)

Сеттер используется в вычисляемых свойствах, когда нужно реализовать двустороннюю привязку (getter/setter). Это позволяет не только получать значение, но и изменять его с кастомной логикой.

import { ref, computed } from 'vue';

const name = ref('Иван');
const surname = ref('Петров');

const fullName = computed({
  // Getter: возвращает полное имя
  get() {
    return `${name.value} ${surname.value}`;
  },
  // Setter: разбивает новое значение на имя и фамилию
  set(newValue) {
    const parts = newValue.split(' ');
    name.value = parts[0] || '';
    surname.value = parts[1] || '';
  }
});

// Использование сеттера
fullName.value = 'Анна Сидорова';
console.log(name.value); // "Анна"
console.log(surname.value); // "Сидорова"

Здесь сеттер fullName обновляет две отдельные реактивные переменные при изменении fullName.value.

2. В пользовательских рефах (customRef)

customRef позволяет создать реактивную ссылку с полностью кастомным поведением при чтении (getter) и записи (setter). Сеттер здесь может, например, добавлять дебаунсинг (отложенное выполнение) или валидацию.

import { customRef } from 'vue';

function useDebouncedRef(value, delay = 500) {
  let timeout;
  return customRef((track, trigger) => ({
    get() {
      track(); // Отслеживаем зависимость
      return value;
    },
    set(newValue) {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        value = newValue;
        trigger(); // Запускаем реактивность
      }, delay);
    }
  }));
}

const searchQuery = useDebouncedRef('');
// Сеттер вызовется не сразу, а через 500мс после последнего изменения
searchQuery.value = 'Vue';

3. В watch-эффектах (watch и watchEffect)

Хотя watch и watchEffect сами по себе не имеют явных сеттеров, они часто используются для реакции на изменения, которые могут быть инициированы сеттерами других реактивных данных. Например, сеттер fullName из предыдущего примера может триггерить watch-эффект.

watch(fullName, (newValue) => {
  console.log(`Полное имя изменено на: ${newValue}`);
});

4. При работе с геттерами/сеттерами в объектах reactive

В объектах, созданных через reactive(), можно использовать нативные JavaScript сеттеры для свойств. Это полезно для добавления логики при установке значений.

import { reactive } from 'vue';

const state = reactive({
  _score: 0,
  get score() {
    return this._score;
  },
  set score(value) {
    if (value < 0) {
      console.warn('Оценка не может быть отрицательной');
      return;
    }
    this._score = value;
  }
});

state.score = 10; // Работает
state.score = -5; // Предупреждение в консоли, значение не изменится

Ключевые принципы и лучшие практики

• Инкапсуляция логики: Сеттеры позволяют инкапсулировать логику изменения данных в одном месте, что упрощает отладку и поддержку.
• Валидация и безопасность: Всегда проверяйте входные значения в сеттерах, чтобы избежать некорректных состояний.
• Побочные эффекты: Используйте сеттеры для вызова дополнительных действий (логирование, отправка аналитики, обновление связанных данных).
• Производительность: В customRef или сеттерах computed избегайте тяжелых вычислений; используйте мемоизацию или дебаунсинг при необходимости.

Заключение

Сеттеры во Vue — мощный инструмент для создания контролируемого и предсказуемого состояния. Они навешиваются на реактивные сущности (ref, computed, customRef, свойства reactive) и позволяют управлять изменениями данных, добавляя валидацию, синхронизацию или отложенные обновления. Правильное использование сеттеров делает код более надежным и удобным для разработки сложных реактивных взаимодействий.