Skip to main content

Что означает app.mount('#app');

app.mount('#app') — это момент, когда Vue реально запускается и начинает рисовать интерфейс.

Что именно означает

app.mount('#app')

Vue говорит:

«Найди элемент с id app в HTML
и вставь туда корневой Vue-компонент»

Откуда берётся #app

В index.html:

<body>
  <div id="app"></div>
</body>

#app — это обычный CSS-селектор.

Что происходит при mount

1️⃣ Vue находит <div id="app">
2️⃣ Создаёт экземпляр приложения
3️⃣ Рендерит App.vue
4️⃣ Подключает реактивность
5️⃣ Запускает жизненный цикл компонентов

После этого:

  • начинают работать компоненты

  • выполняется setup(), mounted()

  • появляется UI

До mount

const app = createApp(App)

На этом этапе:

  • приложение ещё не в DOM

  • можно:

    • подключать плагины

    • регистрировать глобальные компоненты

    • настраивать store / router

app.use(router)
app.use(pinia)

После mount

❌ Нельзя:

  • подключать плагины

  • менять конфигурацию приложения

app.mount('#app')
// app.use(router) ❌ уже поздно

Если #app не найден

Vue выдаст ошибку:

Failed to mount app: mount target selector "#app" returned null

Аналогия 🧠

  • createApp — собрать мебель

  • use(...) — прикрутить детали

  • mount('#app') — поставить её в комнату

Коротко

app.mount('#app')
👉 привязывает Vue-приложение к DOM

 

No comments to display

Back to top