应用的挂载，配置解读

应用挂载的基本操作

应用实例必须调用.mount()方法后才能完成渲染，该方法需要接收一个**“容器” 参数 **，这个参数可以是实际的 DOM 元素（比如通过document.getElementById('app')获取的元素），也可以是 CSS 选择器字符串（例如'#app'）。

示例如下：

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

app.mount('#app')

这里的原理是，应用根组件的内容会被渲染到指定的容器元素内部，而容器元素本身并不会被当作应用的一部分。需要注意的是，.mount()方法应该在整个应用的配置（如设置错误处理器、注册组件等）和资源注册都完成之后再调用。另外，和其他资源注册方法不同，.mount()方法的返回值是根组件实例，而不是应用实例。

DOM 中的根组件模板

根组件的模板一般是组件自身的一部分，但也可以通过在挂载容器内编写模板来单独提供。比如：

<div id="app">

  <button @click="count++">{{ count }}</button>

</div>

import { createApp } from 'vue'

const app = createApp({

  data() {

    return {

      count: 0

    }

  }

})

app.mount('#app')

当根组件没有设置template选项时，Vue 会自动把容器的innerHTML当作模板。这种 DOM 内模板的方式通常用于没有构建步骤的 Vue 应用程序，也能和服务器端框架配合使用，因为此时根模板可能是由服务器动态生成的。

应用配置

应用实例会暴露一个.config对象，通过它可以配置一些应用级的选项。例如，定义一个应用级的错误处理器，用来捕获所有子组件上的错误：

app.config.errorHandler = (err) => {

  /* 处理错误 */

}

这个错误处理器的作用是，当应用内任何子组件发生错误时，都会触发这个函数，便于集中处理错误，比如记录错误日志、给用户显示友好的错误提示等。

应用实例还提供了一些方法来注册应用范围内可用的资源，比如注册一个组件：

app.component('TodoDeleteButton', TodoDeleteButton)

这样注册后，TodoDeleteButton组件在应用的任何地方都可以使用。需要注意的是，一定要在挂载应用实例之前完成所有的应用配置，否则可能会导致配置不生效。

多个应用实例

应用实例不止能创建一个，createAppAPI 允许在同一个页面中创建多个共存的 Vue 应用，而且每个应用都有自己独立的配置和全局资源作用域。例如：

const app1 = createApp({

  /* ... */

})

app1.mount('#container-1')

const app2 = createApp({

  /* ... */

})

app2.mount('#container-2')

这种多应用实例的场景适用于用 Vue 增强服务端渲染的 HTML 时，当只需要 Vue 控制大型页面中特定的一小部分时，不应该把一个单独的 Vue 应用实例挂载到整个页面，而是创建多个小的应用实例，分别挂载到所需的元素上，这样能避免不同部分的功能相互干扰。