Локальная и глобальная регистрация

Компонент во Vue.js существует как обычный JavaScript-объект или функция, но становится доступным в шаблонах только после регистрации. Регистрация определяет область видимости компонента: где именно его можно использовать — во всём приложении или только внутри конкретного компонента. Во Vue предусмотрены два подхода: глобальная и локальная регистрация.

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

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

Во Vue 3 глобальная регистрация выполняется через экземпляр приложения:

import { createApp } from 'vue'
import App from './App.vue'
import BaseButton from './components/BaseButton.vue'

const app = createApp(App)

app.component('BaseButton', BaseButton)

app.mount('#app')

После этого компонент <BaseButton> может использоваться в любом шаблоне без дополнительного импорта.

Ключевые особенности глобальной регистрации

  • Компонент доступен во всём приложении
  • Не требуется импорт в каждом файле
  • Имя компонента регистрируется один раз
  • Увеличивает связанность модулей
  • Усложняет статический анализ и tree-shaking

Именование глобальных компонентов

Для глобально регистрируемых компонентов используется соглашение Base / App / The:

  • BaseButton
  • BaseInput
  • AppHeader
  • TheSidebar

Это подчёркивает их универсальный характер и предотвращает конфликты имён.

Проблемы глобальной регистрации

Глобальная регистрация удобна, но при масштабировании проекта создаёт ряд архитектурных сложностей:

  • Неявные зависимости По шаблону невозможно понять, откуда появился компонент.

  • Рост общего пространства имён При большом количестве компонентов повышается риск конфликтов.

  • Потеря контроля над использованием Компоненты могут применяться там, где это не планировалось.

  • Снижение оптимизаций сборки Некоторые компоненты попадают в финальный бандл даже без фактического использования.

По этим причинам глобальную регистрацию применяют ограниченно.

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

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

import UserCard from './UserCard.vue'

export default {
  components: {
    UserCard
  }
}

Теперь <UserCard> доступен только внутри шаблона данного компонента.

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

<template>
  <div>
    <UserCard />
  </div>
</template>

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

  • Явные зависимости компонента
  • Повышенная читаемость кода
  • Упрощение рефакторинга
  • Улучшенная модульность
  • Лучшие условия для tree-shaking

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

Регистрация компонентов в <script setup>

В Vue 3 с использованием Composition API и <script setup> локальная регистрация выполняется автоматически.

<script setup>
import UserCard from './UserCard.vue'
</script>

<template>
  <UserCard />
</template>

Импортированный компонент сразу доступен в шаблоне без объекта components. Это снижает шаблонный код и уменьшает вероятность ошибок.

Область видимости локально зарегистрированных компонентов

Локально зарегистрированный компонент:

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

Это обеспечивает строгий контроль над использованием компонентов.

Глобальная регистрация через плагины

Часто глобальная регистрация используется внутри плагинов:

export default {
  install(app) {
    app.component('BaseButton', BaseButton)
    app.component('BaseModal', BaseModal)
  }
}

Подключение:

app.use(BaseComponents)

Такой подход централизует глобальные компоненты и делает их подключение явным.

Автоматическая глобальная регистрация

В некоторых проектах применяется автоматическая регистрация компонентов через динамический импорт:

const components = import.meta.glob('./components/base/*.vue', { eager: true })

for (const path in components) {
  const component = components[path].default
  app.component(component.name, component)
}

Метод удобен, но снижает прозрачность структуры и требует строгой дисциплины в именовании компонентов.

Сравнение подходов

Глобальная регистрация

  • Удобна для базовых UI-компонентов
  • Повышает риск архитектурных ошибок
  • Подходит для дизайн-систем и библиотек

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

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

Рекомендуемая стратегия

  • Использовать локальную регистрацию по умолчанию

  • Глобально регистрировать только:

    • базовые UI-компоненты
    • компоненты оболочки приложения
    • элементы дизайн-системы

  • Хранить глобальную регистрацию в одном месте

  • Использовать <script setup> для упрощения кода

Такой подход сохраняет баланс между удобством и архитектурной строгостью.

Оглавление