Архитектура компонента

Quasar — это фреймворк на базе Vue.js, который обеспечивает создание высокопроизводительных веб- и мобильных приложений с использованием единой кодовой базы. Архитектура компонента в Quasar наследует принципы Vue, но добавляет специфические механизмы для работы с UI, состоянием и маршрутизацией.

Структура компонента

Компонент Quasar состоит из трёх основных блоков:

  1. Шаблон (template) Определяет визуальную часть компонента. Использует стандартный синтаксис Vue с директивами v-if, v-for, v-model и другими. В Quasar шаблон активно взаимодействует с компонентами UI библиотеки, такими как QButton, QInput, QCard.

    Пример:

    <template>
  <q-card>
    <q-card-section>
      <div class="text-h6">{{ title }}</div>
      <p>{{ description }}</p>
    </q-card-section>
    <q-card-actions align="right">
      <q-btn label="Подробнее" color="primary" @click="showDetails" />
    </q-card-actions>
  </q-card>
</template>

  2. Скрипт (script) Отвечает за логику компонента: реактивные данные, методы, вычисляемые свойства и жизненный цикл. Quasar поддерживает Composition API и Options API, что позволяет выбирать наиболее удобный стиль организации кода.

    Пример с Composition API:

    <script setup>
import { ref } from 'vue';

const title = ref('Заголовок карточки');
const description = ref('Краткое описание карточки');

function showDetails() {
  console.log('Показать детали');
}
</script>

  3. Стили (style) Могут быть глобальными или локальными, поддерживаются CSS, SCSS, Stylus. Quasar рекомендует использовать Scoped стили для компонентов, чтобы избежать конфликтов.

    Пример:

    <style scoped>
.text-h6 {
  font-weight: 600;
}
</style>

Реактивность и управление состоянием

Quasar полностью наследует реактивность Vue. Основные инструменты управления состоянием:

  • ref и reactive — для локальных данных компонента.
  • computed — для вычисляемых свойств, которые автоматически обновляются при изменении зависимостей.
  • watch и watchEffect — для отслеживания изменений данных.

Пример:

<script setup>
import { ref, computed, watch } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

watch(count, (newVal, oldVal) => {
  console.log(`Значение изменилось с ${oldVal} на ${newVal}`);
});
</script>

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

Quasar активно использует слоты для передачи динамического содержимого в компоненты. Слоты позволяют создавать высоко параметризуемые компоненты без жёсткой привязки к конкретному содержимому.

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

<q-card>
  <q-card-section>
    <slot name="header"></slot>
    <slot></slot>
  </q-card-section>
</q-card>

Компонент-родитель может передавать содержимое:

<MyCard>
  <template #header>
    <h3>Заголовок карточки</h3>
  </template>
  Основное содержимое карточки.
</MyCard>

Управление событиями

Компоненты Quasar используют стандартный механизм Vue для работы с событиями: @click, @input, @update:modelValue и т.д.

  • Эмитинг событий осуществляется через функцию emit:
<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['submit']);

function handleSubmit() {
  emit('submit', { message: 'Данные отправлены' });
}
</script>
  • Прослушивание событий родителем:
<MyForm @submit="onFormSubmit" />

Интеграция с Quasar Plugins

Компоненты могут напрямую использовать плагины Quasar для расширенной функциональности:

  • Dialog — модальные окна
  • Notify — уведомления
  • Loading — индикаторы загрузки

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

<script setup>
import { Notify } from 'quasar';

function showNotification() {
  Notify.create({
    message: 'Операция выполнена успешно',
    color: 'positive',
    position: 'top'
  });
}
</script>

Динамическая загрузка компонентов

Quasar поддерживает ленивую загрузку компонентов для оптимизации производительности. Используется синтаксис defineAsyncComponent:

<script setup>
import { defineAsyncComponent } from 'vue';

const LazyComponent = defineAsyncComponent(() =>
  import('./components/LazyComponent.vue')
);
</script>

<template>
  <component :is="LazyComponent" />
</template>

Взаимодействие с маршрутизатором

Компоненты Quasar легко интегрируются с Vue Router. Основные моменты:

  • Использование <router-link> для переходов между страницами.
  • Доступ к маршруту через useRoute и навигация через useRouter.

Пример:

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

function goToHome() {
  router.push({ name: 'home' });
}
</script>

Оптимизация компонентов

Для крупных приложений важно следить за:

  • Минимизацией реактивных данных — хранить только необходимые значения.
  • Разделением компонентов — создавать мелкие, переиспользуемые компоненты вместо монолитных.
  • Использованием ленивой загрузки — уменьшает время первого рендера.
  • Scoped стилей — предотвращает лишние перерисовки глобального CSS.

Архитектура компонента в Quasar строится на принципах модульности, реактивности и переиспользуемости. Компоненты легко интегрируются с плагинами и маршрутами, что позволяет создавать сложные интерфейсы с минимальной сложностью управления состоянием и логикой.

Оглавление