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