前言
在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 节点上,避免一个一个实例控制整个页面。