今更だけどVue2とVue3の主要な違い

Vue3が2020年9月にリリースされてから数年が経ちましたが、改めて主要な違いを整理してみます。

Composition APIの導入

Vue3最大の変更点です。Vue2のOptions APIに加えて、新しいComposition APIが使えるようになりました。

ロジックの再利用性が格段に向上し、TypeScriptとの相性も良くなりました。

パフォーマンスの改善

Vue3では内部実装が大幅に見直され、初期レンダリングが最大2倍、更新処理も高速化されています。バンドルサイズも約40%削減されました。

複数のルート要素をサポート

Vue2ではテンプレートに必ず単一のルート要素が必要でしたが、Vue3では複数のルート要素(Fragments)が使えます。

Teleportとサスペンス

モーダルやトーストをDOM階層外に配置できる<Teleport>や、非同期コンポーネントの読み込み状態を管理する<Suspense>が追加されました。

その他の変更

• v-modelの複数使用が可能に
• グローバルAPIの変更(createAppで初期化)
• フィルター機能の廃止
• IE11サポートの終了

Vue2は2023年末でサポート終了となったため、新規プロジェクトではVue3一択となっています。既存プロジェクトも、段階的な移行を検討する時期かもしれません。