写点什么

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

用户头像

Augus

关注

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

某摸鱼集团

评论

发布
暂无评论
Vue3入门指北(二)创建应用实例_Vue_Augus_InfoQ写作社区