Computed свойства и watchers

Computed свойства

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

Особенности:

  • Кэширование: Computed свойства пересчитываются только тогда, когда изменяется одна из зависимостей.
  • Декларативность: Вместо ручного обновления значений в методах можно описать зависимость между состояниями декларативно.
  • Использование в шаблонах: Можно вставлять computed свойства напрямую в шаблон через привязку {{ computedValue }} или через директивы v-bind.

Пример использования:

<template>
  <q-input v-model="firstName" label="Имя"/>
  <q-input v-model="lastName" label="Фамилия"/>
  <div>Полное имя: {{ fullName }}</div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

В данном примере fullName пересчитывается автоматически при изменении firstName или lastName. Это уменьшает вероятность ошибок и исключает необходимость ручного обновления поля полного имени.

Getter и Setter для computed:

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

computed: {
  fullName: {
    get() {
      return `${this.firstName} ${this.lastName}`;
    },
    set(value) {
      const parts = value.split(' ');
      this.firstName = parts[0];
      this.lastName = parts[1] || '';
    }
  }
}

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

Watchers

Watchers используются для отслеживания изменений данных и выполнения побочных эффектов. В отличие от computed свойств, watchers не кэшируются и предназначены для реактивного реагирования на изменения.

Примеры применения:

  • Обновление данных на сервере при изменении формы.
  • Валидация ввода в реальном времени.
  • Запуск анимаций или переходов после изменения состояния.

Пример использования:

<script>
export default {
  data() {
    return {
      searchQuery: ''
    };
  },
  watch: {
    searchQuery(newValue, oldValue) {
      this.fetchResults(newValue);
    }
  },
  methods: {
    fetchResults(query) {
      // запрос к API или фильтрация данных
      console.log('Поиск по запросу:', query);
    }
  }
};
</script>

В данном примере при каждом изменении searchQuery автоматически вызывается метод fetchResults, позволяя реализовать динамический поиск.

Опции watchers:

  • deep: true — позволяет отслеживать вложенные изменения объектов или массивов.
  • immediate: true — вызывает watcher сразу после инициализации компонента.
watch: {
  user: {
    handler(newVal) {
      console.log('Пользователь изменился', newVal);
    },
    deep: true,
    immediate: true
  }
}

Deep watchers особенно полезны при работе со сложными структурами данных, например, при редактировании объектов в Quasar Data Table или форм с вложенными полями.

Сравнение computed и watch

Характеристика Computed Watch
Пересчет Автоматический, кэшируемый Не кэшируется, всегда вызывается
Использование Для отображения и производных данных Для побочных эффектов и реакций
Getter/Setter Да Нет
Подходит для Форм, таблиц, UI вычислений Запросов к API, валидации, асинхронных операций

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

  • Использовать computed для производных данных, которые будут отображаться в шаблоне или использоваться другими вычислениями.
  • Использовать watch для побочных эффектов и реакций, которые не должны возвращать значение напрямую.

Интеграция с компонентами Quasar

Computed свойства и watchers активно применяются с компонентами Quasar, такими как:

  • QInput и QSelect — для двусторонней привязки данных и вычисления отображаемых значений.
  • QTable — для динамической фильтрации, сортировки и подсчета агрегатов через computed свойства.
  • QDialog и QPopupProxy — watchers позволяют автоматически реагировать на открытие или закрытие диалогов, обновляя данные или состояния приложения.

Пример динамического подсчета выбранных строк в таблице:

computed: {
  selectedCount() {
    return this.selectedRows.length;
  }
},
watch: {
  selectedRows(newSelection) {
    console.log('Выбрано строк:', newSelection.length);
  }
}

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

Оглавление