木灵鱼儿

木灵鱼儿

阅读:149

最后更新:2022/08/17/ 2:06:25

vue3 createApp 创建实例

在vue2的时候,我们的Vue构造函数上会携带很多全局的api,如果我们想要主要注册一个全局的组件,就不得不这么做:

Vue.component('button-counter', {
  data: () => ({
    count: 0
  }),
  template: '<button @click="count++">Clicked {{ count }} times.</button>'
})

此时,我们创建两个实例:

const app1 = new Vue({ el: '#app-1' })
const app2 = new Vue({ el: '#app-2' })

你会发现明明是两个不同的实例,他们的业务也许是不一样的,但是他们都共同拥有了button-counter组件,也许这个组件只需要在app1中使用。

除了component还有:

  1. Vue.directive()
  2. Vue.mixin()
  3. Vue.use
  4. Vue.config
  5. Vue.prototype

等等,具体可以查看官方文档:Vue 2 全局 API

其原因其实是因为Vue2版本是没有考虑到多个应用程序的,这使得创建vue的副本非常困难。

vue3为了避免这些问题,采用了createAppapi,这个函数将返回一个实例,并且所有全局api的修改全部通过该实例来挂载处理,这样,多个createApp创建的实例,他们之间是互不干扰的。

这也是为什么了vue3中,我们main文件的实例化方式发生变化的原因。

const { createApp } = Vue
const app = createApp({})

app.component('my-component', {
  /* ... */
})

具体的内容我们可以参考官方文档,非常好理解:应用实例 API

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 149

相关文章

目录树