はじめに
vueの勉強をしているとVue.js 3.0がそろそろリリースされるとかされないとかされたとかいう話を耳にします。
勉強始めたてでvueそのものに関してもよくわかってないですが、とりあえずリリースノートを読んでVue3.0ってなんぞやみたいなことを自分なりに学習がてらまとめてみる記事です。
リリースノートを読んでみる
2020/9/18についにvue.js3.0がリリースされたっぽい。いろいろと情報をまとめてくれていた記事もたくさんあったけど、とりあえず公式のリリースノートを見てみる。
This new major version of the framework provides improved performance, smaller bundle sizes, better TypeScript integration, new APIs for tackling large scale use cases, and a solid foundation for long-term future iterations of the framework.
パフォーマンスの向上、バンドルサイズの縮小、TypeScript統合の改善、大規模なユースケースに取り組むための新たなAPIs、と長期的な将来の反復のための強固な基盤、が提供されるらしい。
一個ずつ詳しく見ていく。
大規模なユースケースへの対応
Vue3.0では、Vue2.xのobject-based APIはほとんどそのまま。ただし、Vue3.0ではcompositionAPIが追加されている。CompositionAPIによって、コードの再利用やより信頼性のある型推論、柔軟なコード編成、が可能となる。
Vue2.xでもCompositionAPIを用いることができるplugin(@vue/composition-api)が用意されており、Vue2と3の両方で機能するCompositionAPIユーティリティライブラリ(vueuse,vue-composable)も既に存在している。
バンドルサイズの縮小とパフォーマンスの向上
Vue3.0では、"compiler-informed Virtual DOM"が採用された。
これにより、Vue3はVue2よりも大幅にパフォーマンスが向上している。
- バンドルサイズ : 最大41％軽量
- 初期レンダリング : 最大55％高速
- ページの更新 : 最大133％高速
- メモリ使用量 : 最大54％減少
TypeScript統合の改善
Vue3.0のコードベースはTypeScriptで記述されており、自動的に生成・テスト・バンドルされた型定義が含まれている。公式のVSCode拡張機能であるVeturは、Vue 3の改善された内部型定義を活用して、テンプレート表現とpropsの型チェックをサポート。
実験的な新機能
Singe-File Components(.Vue)用の二つの新機能が提案された。
-
<script setup>- SFC内にsetupを書かずにCompositionAPIが使えるようになる。
- SFCではsetupがめちゃくちゃ利用されるので、書かないで済む方が楽だよね的なモチベーションらしい。
-
<style vars>- SFC内のCSS部分で、変数を用いることができるようになる。
- これまではtemplateで要素にstyleタグをjsから渡していたものを、cssで簡潔に記述可能に。
-
<Suspense>- 非同期処理の完了を、最初のレンダリング時に待機するためのコンポーネント。
-
v-if: isLoadingみたいなのがいらなくなる。
まとめ
この記事ではリリースノートを読んでみました。
vue2と3で下位互換性があるので、compositionAPIとか使わない人でもとりあえずvue3にあげれば高速化の恩恵を受けられる、ということなのかな？？
次の記事では、compositionAPIなど、新たな機能をより深掘っていきます。