Совместимость с Vue 3

Quasar — это фреймворк для разработки интерфейсов на JavaScript, который тесно интегрирован с Vue. С переходом на Vue 3 появилась необходимость обновления всех компонентов, плагинов и утилит Quasar для полной совместимости с новой версией ядра Vue.

Архитектурные изменения

Композиционный API: Vue 3 предоставляет новый API для организации логики компонентов, известный как композиционный API. Quasar полностью поддерживает этот подход, позволяя использовать setup(), ref, reactive, computed и другие функции реактивности без ограничений. Это делает код более модульным и упрощает повторное использование логики в разных компонентах.

Фрагменты и телепорт: В Vue 3 добавлена возможность использовать вместо единственного корневого элемента и компонент для рендеринга содержимого в другой части DOM. Quasar обновил свои компоненты таким образом, чтобы они могли работать с фрагментами, например, диалоговые окна, всплывающие подсказки и меню поддерживают по умолчанию.

Поддержка реактивности: В Vue 3 изменена система реактивности, использующая Proxy вместо Object.defineProperty. Все виджеты и утилиты Quasar, включая состояние компонентов и Vuex-модули, работают корректно с этой системой. Это обеспечивает мгновенное обновление интерфейса при изменении состояния без необходимости дополнительных обёрток.

Обновленные компоненты

Все базовые UI-компоненты Quasar были переписаны для совместимости с Vue 3:

  • Кнопки, панели и карточки теперь используют композиционный API и полностью поддерживают TypeScript типизацию.
  • Формы и поля ввода интегрированы с Vue 3 реактивностью и валидируются через обновлённые механизмы валидации.
  • Диалоги, уведомления и меню автоматически используют для рендеринга в body, что упрощает управление z-index и позиционированием.

Плагины и утилиты

Quasar-плагины также адаптированы под Vue 3:

  • Notify, Dialog, Loading, Cookies работают как ранее, но теперь используют реактивные свойства Vue 3 для отслеживания состояния.
  • Plugins API обновлён, чтобы корректно интегрироваться с app.use() нового Vue 3, обеспечивая возможность глобальной регистрации плагинов без конфликтов.

Поддержка Composition API в Quasar

Quasar предоставляет специальные хуки для работы с Vue 3:

  • useQuasar() — возвращает объект $q, который содержит доступ к конфигурации фреймворка, плагинам и утилитам.
  • useDialog(), useNotify() и другие функции позволяют управлять компонентами программно, используя реактивные данные без необходимости прямого обращения к $q.

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

import { ref } from 'vue';
import { useQuasar } from 'quasar';

export default {
  setup() {
    const $q = useQuasar();
    const message = ref('Привет, Quasar!');

    function showNotification() {
      $q.notify({
        message: message.value,
        color: 'green',
        position: 'top-right'
      });
    }

    return { message, showNotification };
  }
}

Типизация и TypeScript

Quasar в связке с Vue 3 полностью поддерживает TypeScript. Все компоненты и утилиты имеют корректные типы, что позволяет:

  • Легко интегрировать Quasar в проекты на TypeScript.
  • Использовать автодополнение и статическую проверку типов в IDE.
  • Исключить ошибки при работе с реактивными данными и компонентными свойствами.

Обновление проектов с Vue 2

Для проектов, которые переходят с Vue 2 на Vue 3, Quasar предоставляет:

  • Миграционную документацию с разбором изменений API.
  • Совместимые версии компонентов и плагинов, которые корректно работают с новым ядром Vue.
  • Утилиты для проверки устаревших методов, таких как this.$q.dialog() с коллбэками, чтобы адаптировать код к Composition API.

Оптимизация и производительность

Использование Vue 3 позволяет Quasar улучшить производительность за счёт:

  • Эффективной реактивной системы на основе Proxy.
  • Динамического рендеринга фрагментов без лишних обёрток.
  • Улучшенной работы с виртуальным DOM, особенно в компонентах списков и таблиц.

Это делает интерфейсы более отзывчивыми и снижает нагрузку на браузер при большом количестве динамических компонентов.

Совместимость с экосистемой Vue 3

Все сторонние библиотеки Vue 3 совместимы с Quasar. Благодаря этому можно использовать:

  • Vue Router 4 для маршрутизации.
  • Pinia вместо Vuex для управления состоянием.
  • Composition API сторонних библиотек и плагинов без конфликтов с Quasar.

Это обеспечивает бесшовную интеграцию и позволяет строить современные SPA и PWA с полной поддержкой возможностей Vue 3.

Оглавление