Реактивность и refs

Quasar, как фреймворк на базе Vue.js, наследует все принципы реактивности Vue 3. Основной механизм заключается в том, что данные, обернутые в реактивные объекты, автоматически отслеживают изменения и инициируют перерисовку компонентов, где они используются.

Для создания реактивного состояния применяются функции из vue:

import { reactive, ref, computed, watch } from 'vue';
  • reactive создаёт реактивный объект из обычного JavaScript объекта.
  • ref создаёт реактивную ссылку на примитивное значение или объект.

Пример реактивного объекта:

const state = reactive({
  counter: 0,
  user: {
    name: 'Alex',
    age: 30
  }
});

Изменения state.counter или state.user.name автоматически обновят все компоненты, которые используют эти свойства.

Использование ref

ref предназначен для создания реактивного контейнера для примитивов, а также для получения ссылки на DOM элемент через template ref.

Примитивы

const count = ref(0);

function increment() {
  count.value++;
}

Особенность ref в том, что значение хранится в свойстве .value. Это важно для реактивного отслеживания изменений. При рендеринге в шаблоне Vue автоматически разворачивает .value.

Ссылки на DOM элементы

В Quasar часто используются ref для прямого доступа к компонентам Quasar, например, к QInput или QDialog.


Фокус
const usernameInput = ref(null);

function focusInput() {
  usernameInput.value.focus();
}

С помощью ref можно не только управлять фокусом, но и вызывать методы компонентов Quasar, например, reset, show или hide.

Реактивные вычисляемые свойства

computed используется для создания вычисляемых реактивных свойств, которые автоматически пересчитываются при изменении зависимостей.

const doubled = computed(() => count.value * 2);

В Quasar это удобно для динамических стилей, фильтров и условий отображения:

const buttonLabel = computed(() => count.value > 5 ? 'Слишком много' : 'Добавить');

Наблюдение изменений: watch и watchEffect

watch позволяет выполнять побочные эффекты при изменении конкретных реактивных данных.

watch(count, (newVal, oldVal) => {
  console.log(`Count изменился с ${oldVal} на ${newVal}`);
});
  • watchEffect автоматически отслеживает все реактивные зависимости внутри функции:
watchEffect(() => {
  console.log(`Текущее значение count: ${count.value}`);
});

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

Особенности реактивности в компонентах Quasar

Quasar добавляет реактивность не только для данных, но и для UI-состояний компонентов. Примеры:

  • QDialog — управление открытием через v-model:

  
    Содержимое диалога
    
      
    
  

const isDialogOpen = ref(false);
  • QInput — реактивная привязка значения:
const username = ref('');

Изменение username мгновенно отражается во всех местах, где используется эта переменная.

Совместное использование reactive и ref

Можно объединять оба подхода:

const form = reactive({
  username: '',
  password: ''
});

const isSubmitting = ref(false);
  • reactive удобен для сложных объектов с множеством свойств.
  • ref удобен для простых флагов или примитивных значений.

При необходимости отслеживания вложенных объектов внутри reactive, Quasar и Vue автоматически делают вложенные объекты реактивными, что избавляет от необходимости создавать ref для каждого поля.

Практическая рекомендация

  • Для примитивов: использовать ref.
  • Для объектов и массивов: использовать reactive.
  • Для DOM элементов и компонентов Quasar: использовать ref.
  • Для зависимых вычислений: использовать computed.
  • Для побочных эффектов при изменении данных: использовать watch или watchEffect.

Эти инструменты позволяют управлять состоянием приложения на уровне компонентов Quasar с максимальной реактивностью и минимальной ручной синхронизацией.

Оглавление