vue2 vue3比較（new Vue() vs createApp()）

#はじめに
vue3勉強初めました、自分で気付きましたvue2とvue3の変更点とそれについて調べたものを共有したいと思います。先ずは最初にvue2のnew Vue()とvue3のcreateApp()から解説していきたいと思います。

#入り口から始まる
今回開発のlaravelアプリケーションの構造で例として解説していきます。resources/js/app.jsでこのようなコードが見れると思います。
vue2の場合は：

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

すべてがvueインスタンスから始まりますが、vue3の場合はこんな風になりました：

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

なぜvue3がcreateApp()のように修正したか、これでどんなメリットがありますかをちょうど考えちゃいました。

#createAppのメリット
例えば、ものすごく大きなプロジェクトを開発する複数のチームがある場合。チームAにはグローバルコンポーネントShowDialogが含まれるvueAインスタンスが必要であり、チームBにはグローバルコンポーネントshowDialogが必要としないvueBインスタンスが必要であり、 2つのvueインスタンスの機能は完全に独立、相互の分離が求められている場合はどう実現すればよいですか？

vue2の場合は以下のコードが考えられるでしょう。

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

<div id="foo"></div>
<div id="bar"></div>

<script>
  import Vue from "vue";

  Vue.component('show-dialog',{
    template:'<h1>showDialog</h1>'
  })

  const vueA = new Vue({
    template: `<div>
                vueA
                <show-dialog></show-dialog>
                </div>
    `
  })
  vueA.$mount('#foo')

  const vueB = new Vue({
    template: `<div>
                vueB
                <show-dialog></show-dialog>
                </div>
    `
  })
  vueB.$mount('#bar')
</script>

new演算子を使用して2つのvueインスタンスAとBを作成しました、グローバルコンポーネントshow-dialogを登録しました。グローバルコンポーネントshow-dialogはインスタンスAの制御されるビュー領域のみ使えると期待していますが、それは実現できない。 なぜなら、vue2のコンポーネントのレジストリシステム設計では、すべてのvueインスタンスが同じコンストラクターオブジェクト（グローバル命令/グローバルコンポーネントなどを含む）を共有しています、インスタンスAとBを完全に分離することはできません。

それに対して、vue3の場合、以下のコードが考えられるでしょう。

<script src="https://unpkg.com/vue@next"></script>

<div id="foo"></div>
<div id="bar"></div>

<script>

    Vue.component('show-dialog',{
        template:'<h1>showDialog</h1>'
    })

    const vueA = Vue.createapp({
        template: `<div>
                vueA
                <show-dialog></show-dialog>
                </div>
    `
    })
    vueA.component('show-dialog',{
        template:'<h1>showDialog</h1>'
    })
    vueA.$mount('#foo')

    const vueB = Vue.createapp({
        template: `<div>
                vueB
                </div>
    `
    })
    vueB.$mount('#bar')
</script>

上記のように、vue3のcreateAppメソッドを使用してインスタンスを作成すると、作成されたインスタンスAとBは、完全に分離な環境になります。vue3の場合、show-dialogコンポーネントはインスタンスAの中にレジストリできます。それによって、show-dialogコンポーネントはvueAインスタンスがコントロールしたビューの中では完全に利用できますが、vueBインスタンスがコントロールしたビューの中では利用できません（show-dialogコンポーネントを共有したい場合、AとBの中に別々に登録すればいい）。

以上で、別々に動作し、互いに影響を与えず、完全に分離されるインスタンスが作成されています、共有するものを自由に選択することもできます。