まえがき
最近、社内でVue2で作られているアプリケーションのUIを刷新する計画をしており、Vue3を導入するかの議論がされました。
2018年後半からVue3の開発が開始されてから約二年。
Vue3もRCとなり、リリースに向けて動きはじめました。
Vue3のComposition API等具体的な実装部分に触れている記事はよくみますが
大枠に触れている記事が少ないので書いてみます。
EvanYou氏がある記事の中で、「なぜ書き換えたか？」について語っているので、私なりにまとめました。
なぜ書き換えたか？
新しい言語機能の活用
ES2015の最新版への対応が各ブラウザで行われており、Vueも対応する必要がありました
その中でも、Proxyが一番注目しており、VueでもProxyを活用することで、パフォーマンス改善を行うことができます。
アーキテクチャの問題へ対応
Vueではコードが暗黙的な結合という形で、技術負債を積み上げてきました。
それにより、コントリビューターが変更を加えることが困難になっていました。
これらを解決し、コードを変更をしやすくする必要がありました。
改善点
Typescriptのサポート
Vue2はもともとプレーンESで作成されていましたが、TypeScriptをサポートしました。
内部パケージの分離
monorepo（一つのリポジトリでパッケージを管理すること）で、内部パッケージ化を行い、それぞれが独自のAPI、タイプ定義、およびテストを実装しています。
それにより、モジュール間の依存関係をより明確にし、開発者がすべてを読み、理解し、変更しやすくし、プロジェクトの貢献の障壁を下げ、長期的な保守性を改善しました。
RFCプロセスの設定
ユーザーが重大な変更についてフィードバックを提供できるよう、RFC（Request for Comments）プロセスを採用しました。
議論はGitHubリポジトリで行われ、提案はプルリクエストとして送信されるため、コメントで有機的に議論が展開されます。
Vueはもともと、軽量のフロントエンドフレームワークですが、更に軽量化を行っています。
仮想DOMのボトルネックの改善
Vue 3では、適切なAST変換パイプラインを使用してコンパイラーを書き直しました。
これにより、コンパイル時の最適化を行っています。
- ブロック内のノード更新の際、ツリーのトラバースの最適化を行いました。
- この最適化は、実行する必要のあるツリートラバーサルの量を1桁減らすことで、仮想DOMのオーバーヘッドの多くを回避します。
- メモリ使用率軽減が大幅に向上し、ガベージコレクションの頻度が減少します。
- 要素レベルでは、コンパイル段階で実行計画の作成を行い、ランタイムがそれをヒントに実行を行うことで高速化を実現しています。
これらの手法を組み合わせると、レンダリング更新のベンチマークが大幅に改善されています。
Vue3がVue2のCPU時間（Javascript計算の実行に費やされた時間）の10分の1未満になることもあります。
バンドルサイズの最小化
フロントエンドフレームワークは、サイズそのものがパフォーマンスに影響しています。
Vueはもともと軽量（圧縮しても約23KB）でしたが、２つの問題に気がつきました。
- 利用していない機能まで、ダウンロードと解析のコストが発生している。
- 機能を追加するにつれ、容量は無限に増え続ける。
この問題を解決するにはツリーシェイキングを行い、不要なコードを削除することでした。
Vue3では、ほとんどのグローバルなAPI、内部ヘルパーをESモジュールにすることで、これを実現しました。
多くの新機能の追加にも関わらず、Vue2の半分以下の容量を実現しています。
まとめ
ここでは触れていませんが多くの機能が追加されています。
- Composition APIの導入
- multi-v-model機能追加
- Teleport機能追加
- Fragment機能追加
- Suspense機能追加
- フィルターの廃止
等々…
上記に加え、パフォーマンスの向上を考えると、導入しない手はないかなと個人的に考えており
下位互換性もあるとのことなので、正式版がでたら対応を考えたいと思います。
Composition APIの導入で、少しReact側によったことからReactでもいいのでは？という賛否両論の意見が出ていますが
軽量や学習コストの低さという部分では、Vueが依然として変わらないと思うので、棲み分けとしては十分できているのかと思ってたりします。
今回は、ブログをもとに私が解釈した内容で書いているので、認識の齟齬等あれば教えて頂きたいです。
元ネタ：https://increment.com/frontend/making-vue-3/?ref=madewithvuejs.com#why-rewrite