Vue3入门指北（二）创建应用实例

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第二十天，点击查看活动详情

前言

在vue2中我们都知道vue应用实例只有一个，所有全局操作都在这个vue实例上进行的，比如用于组件通信的 EventBus等等，并通过new 一个 vue实例通过 $mount 挂载到dom节点，在进行渲染。不过在vue3变了，他不限制vue实例必须唯一了，允许创建多个，这对某些特殊场景是非常有用的。下面我们就来具体看看二者的差异。

应用实例

在vue2中创建vue实例并挂载是这样的：

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

import Vue from 'vue'; 
import App from './App.vue'; 
new Vue({ 
    render: h => h(App), 
}).$mount('#app')

全局公用一个vue实例。

当我们需要一个公共组件，并在当前vue实例全局可以用时，一般时如下定义公共组件的：

...
// 引入全局组件 
import GComponent from './GComponent.vue'; 
// 注册全局组件
Vue.component('GComponent', GComponent);
...
...

在Vue3中，增加新的全局Api——createApp,并通过这个创建vue 实例，并允许有多个vue实例，每个vue实例都一套属于自己的资源和配置，在自己的作用域下可以用。

通过应用实例暴露的 component 方法注册公共组件，使得这个组件在当前应用范围内时全局可用的。并且注册全局组件的方式，支持链式调用。

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

import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'
import HelloWorld from './components/HelloWorld.vue'

const app = createApp(App)
app.component('HelloWorld', HelloWorld).mount('#app')
const app2 = createApp(App)
app2.mount('#app2')

当我们在开发大型页面中的某些部分时，就可以通过创建多个 vue 应用实例，相应的实例分别挂载到对应的 Dom 节点上，避免一个一个实例控制整个页面。