Explicación detallada de la función app.mount() de Vue3

Vue3 全局 APIAPI global de Vue3

En Vue3,app.mount()la función es montar la aplicación Vue en el elemento del DOM.

1. Estructura básica de una aplicación Vue3

En Vue3, primero necesitamos crear una instancia de la aplicación Vue. Normalmente, podemos usarcreateApp()la función para crear una instancia de aplicación:

Ejemplo

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

const app = createApp(App);

En este ejemplo,createApp()la función recibe un componente raízAppcomo parámetro y devuelve una instancia de aplicaciónapp. A continuación, necesitamos montar esta instancia de aplicación en el elemento DOM.

2. Función de app.mount()

app.mount()La función de este método es montar la instancia de la aplicación Vue en el elemento DOM especificado. Su sintaxis es la siguiente:

Ejemplo

app.mount(selector);

Donde,selectores una cadena que representa el selector del elemento DOM objetivo. Vue encontrará el primer elemento que coincida con el selector y montará la instancia de la aplicación en ese elemento.

2.1 Uso básico

Supongamos que en nuestro archivo HTML hay undivelemento, cuyoidParaapp：

Ejemplo

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

Podemos montar la aplicación Vue en estedivelemento con el siguiente código:

Ejemplo

app.mount('#app');

Este código encontrará elidParaappdedivelemento y montará la instancia de la aplicación Vue en él. Después del montaje, Vue comenzará a renderizar el componente raízAppe insertará su contenido en eldivelemento.

2.2 Consideraciones

  • Unicidad del selector：app.mount()La función solo se montará en el primer elemento que coincida con el selector. Si hay varios elementos coincidentes en la página, Vue solo se montará en el primero.

  • Momento del montaje：app.mount()La función debe llamarse después de que el DOM esté completamente cargado, para asegurar que el elemento objetivo ya exista. Normalmente, la llamamos en elwindow.onloadoDOMContentLoadedevento.app.mount()。

3. Escenarios de aplicación práctica

3.1 Montaje dinámico

En algunos casos, es posible que necesitemos decidir dinámicamente el punto de montaje. Por ejemplo, puede que necesitemos montar la aplicación en diferentes elementos DOM en diferentes páginas o bajo diferentes condiciones. En este caso, podemos pasar dinámicamente el selector aapp.mount()：

Ejemplo

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

3.2 Montaje diferido

A veces, es posible que queramos montar la aplicación solo en un momento específico. Por ejemplo, montar la aplicación después de esperar a que se completen algunas operaciones asíncronas. En este caso, podemos llamar a la función después de que se completen las operaciones asíncronas.app.mount()：

Ejemplo

setTimeout(() => {
  app.mount('#app');
}, 3000); // Montar la aplicación después de 3 segundos

Vue3 全局 APIAPI global de Vue3

Otras extensiones