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

作者：Augus

2022 年 9 月 28 日
天津
本文字数：713 字
阅读完需：约 2 分钟

前言

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

发布于: 刚刚阅读数: 4

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

发布

暂无评论

创作场景

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

前言

应用实例

Augus

评论