Подробное объяснение функции app.mount() в Vue3

Vue3 全局 APIГлобальный API Vue3

В Vue3,app.mount()Его цель — смонтировать приложение Vue на DOM-элемент.

1. Базовая структура приложения Vue3

В Vue3 нам сначала нужно создать экземпляр приложения Vue. Обычно мы можем использоватьcreateApp()функция для создания экземпляра приложения:

Пример

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

В этом примере,createApp()Функция принимает корневой компонентAppв качестве параметра и возвращает экземпляр приложенияappДалее нам нужно смонтировать этот экземпляр приложения на DOM-элемент.

2. Назначение функции app.mount()

app.mount()Назначение этой функции — смонтировать экземпляр приложения Vue на указанный DOM-элемент. Её синтаксис выглядит так:

Пример

app.mount(selector);

Гдеselectorявляется строкой, представляющей селектор целевого DOM-элемента. Vue найдёт первый элемент, соответствующий селектору, и смонтирует экземпляр приложения на этот элемент.

2.1 Базовое использование

Предположим, в нашем HTML-файле естьdivэлемент, у которогоidявляетсяapp：

Пример

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

Мы можем использовать следующий код, чтобы смонтировать приложение Vue на этотdivэлемент:

Пример

app.mount('#app');

Этот код найдётidявляетсяappизdivэлемент и смонтирует экземпляр приложения Vue на этот элемент. После монтирования Vue начнёт рендерить корневой компонентAppи вставит его содержимое вdivэлементу.

2.2 Примечания

  • Уникальность селектора：app.mount()Функция выполнит монтирование только к первому элементу, соответствующему селектору. Если на странице есть несколько подходящих элементов, Vue смонтируется только к первому из них.

  • Время монтирования：app.mount()Функцию следует вызывать после завершения загрузки DOM, чтобы убедиться, что целевой элемент уже существует. Обычно мыwindow.onloadилиDOMContentLoadedвызываем её в событии.app.mount()。

3. Практические сценарии применения

3.1 Динамическое монтирование

В некоторых случаях нам может понадобиться динамически определить точку монтирования. Например, нам может понадобиться смонтировать приложение к разным DOM-элементам на разных страницах или при разных условиях. В этом случае мы можем динамически передать селектор вapp.mount()：

Пример

const mountElement = condition ? '#app1' : '#app2';
app.mount(mountElement);

3.2 Отложенное монтирование

Иногда нам может понадобиться смонтировать приложение только в определённый момент времени. Например, дождаться завершения некоторых асинхронных операций, прежде чем монтировать приложение. В этот момент мы можем вызватьapp.mount()：

Пример

setTimeout(() => {
  app.mount('#app');
}, 3000); // Смонтировать приложение через 3 секунды

Vue3 全局 APIГлобальный API Vue3

Другие расширения