Vue3 app.mount() 函数（详细教程）

Vue3 app.mount() 函数

Vue 3 的 app.mount() 函数是创建并挂载 Vue 应用的核心步骤之一。它决定了 Vue 实例将在哪个 DOM 元素上启动，并开始渲染组件。理解并正确使用 app.mount()，是构建 Vue 3 项目的基础。

核心概念

app.mount() 是 Vue 3 应用实例（由 createApp 创建）的一个方法，用于将应用挂载到页面中的某个 DOM 元素上。该函数接受一个选择器或 DOM 元素作为参数，并开始 Vue 的响应式系统和组件渲染流程。

• 为什么需要它：Vue 是一个渐进式框架，需要明确知道从哪里开始控制 DOM。app.mount() 就是这个“起点”。
• 类比理解：可以将 app.mount() 想象成“钥匙”，你用它打开 DOM 的“门”，Vue 就可以进入并接管页面逻辑。

基础语法

const app = createApp(App)
app.mount('#app')

• createApp(App)：创建一个 Vue 应用实例，其中 App 是根组件。
• app.mount('#app')：将应用挂载到 id 为 app 的 DOM 元素上。

使用 HTML 选择器

app.mount('#app') // 挂载到 <div id="app"></div>

使用 DOM 元素

const el = document.querySelector('#app')
app.mount(el) // 传递 DOM 元素对象

自定义挂载容器

app.mount('body') // 将 Vue 应用挂载到整个 body 上

注：挂载到 body 时需要注意，Vue 会接管 body 内的所有内容，可能导致页面结构被覆盖。

进阶特性

实战应用

单页面应用 (SPA) 挂载

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

createApp(App).mount('#app') // 标准的挂载方式

注：这是最常见的使用方式，适合大多数 Vue 3 项目。

挂载到动态容器

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

const container = document.createElement('div')
document.body.appendChild(container)
createApp(App).mount(container) // 将 Vue 挂载到动态创建的 div 上

注：适用于需要动态控制挂载位置的场景，例如弹窗、动态加载模块。

挂载前添加预校验

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

const app = createApp(App)

if (window.innerWidth > 768) {
  app.mount('#desktop-app') // 仅在桌面端挂载
} else {
  app.mount('#mobile-app') // 移动端挂载到另一个容器
}

注：通过条件判断实现响应式挂载，适合多设备适配的项目。

注意事项

• 避免重复挂载：同一个应用实例不能多次调用 mount()，否则会报错。
• 确保 DOM 已加载：挂载前应确保 DOM 元素已经存在，否则可能找不到容器。
• 挂载点唯一性：虽然 Vue 3 支持多个应用实例，但一个 DOM 节点只能挂载一个 Vue 应用。
• 不要挂载到非 DOM 节点：如 #id 不存在或传入的是非 DOM 节点对象，挂载会失败。

常见问题

• Q：为什么调用 mount() 后页面没有变化？
  A：检查 DOM 容器是否存在，且确保 App 组件有正确的内容。

• Q：app.mount() 是必须的吗？
  A：是的，如果不调用 mount()，Vue 应用不会被激活，页面也不会被渲染。

• Q：mount() 能挂载多个组件到不同容器吗？
  A：可以，但需要创建多个应用实例，每个实例挂载到不同的容器。

• Q：mount() 与 el 选项有何区别？
  A：el 是 Vue 2 中的配置项，Vue 3 推荐使用 mount() 方法进行更清晰的控制。

高级技巧

挂载时传递属性

Vue 3 允许在挂载时向根组件传递属性，通常通过 app.mount(container, context) 的第二个参数：

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

const app = createApp(App)
app.mount('#app', {
  props: {
    user: '张三'
  }
})

注：此用法适合需要在挂载时动态注入参数的场景。

延迟挂载

在某些场景下，需要延迟挂载，例如等待某个异步资源加载完成：

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

const app = createApp(App)

fetch('/data.json').then(data => {
  // 模拟异步加载
  app.mount('#app') // 加载完成后挂载
})

注：延迟挂载能有效避免“白屏”或“加载失败”的问题。

多应用实例并存

Vue 3 支持在同一页面中挂载多个应用实例：

import { createApp } from 'vue'
import App1 from './App1.vue'
import App2 from './App2.vue'

const app1 = createApp(App1)
const app2 = createApp(App2)

app1.mount('#app1') // 第一个应用
app2.mount('#app2') // 第二个应用

注：适用于需要多个独立 Vue 应用并存的复杂项目结构。

总结

Vue3 的 app.mount() 函数是启动 Vue 应用的关键步骤，合理使用能提升开发效率和项目结构的清晰度。掌握其基本用法和高级技巧，有助于构建更灵活、更专业的 Vue 项目。