Глобальные и локальные компоненты

Основные понятия компонентов

В Quasar компоненты делятся на глобальные и локальные, что определяет способ их использования и область видимости в приложении.

  • Глобальные компоненты регистрируются один раз и становятся доступными в любом месте приложения без дополнительного импорта.
  • Локальные компоненты подключаются только в пределах конкретного компонента, где они нужны, что позволяет контролировать область видимости и уменьшать размер конечного бандла.

Регистрация глобальных компонентов

Глобальная регистрация выполняется через объект Vue при создании приложения. В Quasar она обычно происходит в файле src/boot или в основном файле main.js:

import { boot } from 'quasar/wrappers'
import MyComponent from 'components/MyComponent.vue'

export default boot(({ app }) => {
  app.component('MyComponent', MyComponent)
})

После такой регистрации компонент <MyComponent /> доступен во всех шаблонах приложения без необходимости его повторного импорта.

Преимущества глобальной регистрации:

  • Упрощает использование часто применяемых компонентов (например, кнопок, модальных окон).
  • Позволяет стандартизировать интерфейс за счет единообразных компонентов.

Недостатки глобальной регистрации:

  • Увеличивает размер бандла, если компонент используется редко.
  • Усложняет отладку при большом количестве глобально доступных компонентов.

Локальная регистрация компонентов

Локальная регистрация выполняется внутри конкретного компонента и ограничивает область видимости компонентом-родителем:

<template>
  <div>
    <LocalComponent />
  </div>
</template>

<script>
import LocalComponent from 'components/LocalComponent.vue'

export default {
  components: {
    LocalComponent
  }
}
</script>

Преимущества локальной регистрации:

  • Снижает нагрузку на бандл, так как компонент подключается только там, где нужен.
  • Упрощает сопровождение кода: легче понять, где используется компонент.

Недостатки:

  • Требует явного импорта и регистрации в каждом компоненте, где он используется.
  • Может приводить к повторяющемуся коду при многократном использовании одного и того же компонента в разных местах.

Разграничение по областям применения

  • Глобальные компоненты чаще всего используют для UI-элементов, повторяющихся на многих страницах: кнопки, иконки, карточки.
  • Локальные компоненты применяются для специфических частей страницы: форма редактирования профиля, модальное окно для конкретного действия.

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

Quasar и Vue поддерживают динамическую регистрацию компонентов, что позволяет подключать их по требованию, экономя ресурсы:

export default {
  components: {
    AsyncComponent: () => import('components/AsyncComponent.vue')
  }
}

При такой регистрации компонент загружается только тогда, когда он реально используется на странице.

Использование Quasar UI-компонентов

Quasar предоставляет множество компонентов, которые уже зарегистрированы глобально через плагин Quasar Framework. Тем не менее, в некоторых случаях требуется локальная регистрация, особенно если используется tree-shaking:

import { QBtn, QCard } from 'quasar'

export default {
  components: {
    QBtn,
    QCard
  }
}

Это позволяет подключать только те компоненты Quasar, которые реально используются, уменьшая размер финального бандла.

Практические советы

  • Для повторно используемых элементов интерфейса рекомендуется глобальная регистрация.
  • Для специфичных элементов одной страницы — локальная регистрация.
  • Для редко используемых больших компонентов — динамическая регистрация через import().
  • В больших проектах сочетание глобальных и локальных компонентов помогает сохранить баланс между удобством и производительностью.

Заключение концепции

Правильное разделение компонентов на глобальные и локальные позволяет оптимизировать производительность приложения, структурировать код и уменьшить связность между его частями. Использование Quasar Framework облегчает этот процесс, предлагая гибкие способы регистрации и подключения компонентов, включая статическую, локальную и динамическую.

Оглавление