Vue 2 と Vue 3
Vue はバージョン３がリリースされていますが、Vue 2 もまだまだ使われているようです。
Vue CLI でプロジェクト作成時も、Vue のバージョンを２にするか３にするか、問われます。
Vue のバージョン３でどんな機能が追加されたのでしょうか。
バージョン３での変更点
Vueはバージョン２からバージョン３へのアップデートにより、新機能の追加、破壊的な変更がいくつも行われています。
注目すべき新機能の中に、Composition API や Teleport などがあります。
また、Global API も破壊的な変更が行われているため、Vue 2からVue 3への移行時は注意が必要です。
すべての変更点の詳細については、以下の公式ドキュメントに記載されています。
Composition API
Vue 2 では、Option API を用いてコンポーネントを作成していました。
Vue 3 では、Composition API が追加されました。
Option API では、ライフサイクル毎に、処理を記述していきます。
この場合だと、ロジックの各処理がソースコード内で分散することになります。
そうなると、コンポーネントが大規模になると、可読性が低くなってしまいます。
そこで、Composition API です。
Composition API では、ロジック毎に処理を記述していきます。
例えば、APIを叩くロジック、LocalStorageからデータを読み込むロジック、などそれぞれのロジック毎に、処理をまとめて記述することが可能になります。
こうすることで、ロジック毎に処理がまとまり、可読性が向上します。
PRにある↓の画像がイメージしやすいです。
https://github.com/vuejs/rfcs/pull/42
各色はそれぞれのロジックを示しています。
Vue 2 の Option API では、ライフサイクル毎に処理をまとめて記述するため、ロジック毎にみると、コードはバラバラになってしまいます。
一方で、Vue 3 の Composition API では、ロジック毎にまとめて記述できるので、図の右のようになります。
Teleport
Vue 3にはTeleportという機能もあります。
Vue 2でも、Portal Vue というプラグインを利用すれば、類似の機能が使えたようです。
https://github.com/LinusBorg/portal-vue
Teleport とは、その名前のイメージ通り、コンポーネントを別の場所に移動できます。
↓のサンプルを見たほうがイメージしやすいと思います。
<teleport to="#modals"> <div>A</div> </teleport> <div id="modals"> </div>
このように記述することで、
上のサンプルの場合だと、<div id="modals"></div>の中に、<div>A</div>が移動されます。
結果として次のようになります。
<div id="modals">
<div>A</div>
</div>
