在Vue2.x版本中，我们实例一个Vue都是使用new Vue()这种方法，特别是下面这种写法，在脚手架中也是非常常见的。

new Vue({
  render: h => h(App)
}).$mount('#app')

但是在我们学习Vue3.x版本的时候，我们会发现，创建实例的方法变了，变成了createApp()这种方法，常见的代码如下

import { createApp } from 'vue'
import App from './App.vue'
 
createApp(App).mount('#app')

作为一名程序员，就会产生一个疑问，为什么要改变创建实例的方法呢，单纯看代码，也没有什么大的改变，是哪里有改变呢？ 接下来我就用一个案例来展示一下有一些什么改变。

在Vue2.x中

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <div id="boxone"></div>
    <div id="boxtwo"></div>


    <script>
        //注册一个局部组件
      Vue.component('spa',{
        template:'<span>看看我是谁</span>'
      })
      
      //实例一个vueA
      const vueA = new Vue({
        template:`
         <div>
           <spa></spa>
           boxone
        </div>
        `
      })
      vueA.$mount('#boxone')

      //实例一个vueB
      const vueB = new Vue({
        template:`
         <div>
           <spa></spa>
            boxtwo
         </div>
        `
      })
      vueB.$mount('#boxtwo')
    </script>

代码运行的结果是这样的：

我们实例的vue中都可以运用这个局部注册的组件，但是我突然想到一个想法，能不能让这个局部注册组件只能让实例vueA使用，vueB却用不了呢，这时候，createApp()就可以快速的办到这个事情，看以下在Vue3.x版本中的写法

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="boxone"></div>
    <div id="boxtwo"></div>


    <script> 
      //实例一个vueA
      const vueA = Vue.createApp({
        template:`
         <div>
           <spa></spa>
           boxone使用
        </div>
        `
      })
      vueA.component('spa',{
        template:'<span>我只能给</span>'
      })
      vueA.mount('#boxone')

      //实例一个vueB
      const vueB =Vue.createApp({
        template:`
         <div>
            <spa></spa>
            boxtwo使用
         </div>
        `
      })
      vueB.mount('#boxtwo')
    </script>

如果是这样写的，让我们运行代码看看，效果是如何的

效果是上图这样的，我vueB实例中的spa组件呢？这时我们看看后台

翻译一下后是：spa 如果这是一个本地自定义元素，请务必通过编译器从组件分辨率中排除它。

原因就是因为这个spa是只有vueA实例才能使用的，vueB实例不能使用，所以要排除掉，但我们把vueB实例中的<spa></spa>给删除掉，后台运行也没有了这个错误。