🎯 1.1 なぜ Composition API への書き換えが必要なのか


✅ 【要点】

Vue 2.7 では

しかし今後の Vue の主流は

Composition API

Vue 3 以降では 公式が Composition API 推奨

→ 長期的にみると 保守性・拡張性が高い


🟢 【クラスコンポーネントの課題】

課題 内容
型推論が弱い this の型が複雑になる
ライフサイクルごとに書く必要がある mounted, created に分かれて見通しが悪くなる
ロジックの再利用が難しい mixin が必要(わかりにくい / 衝突しやすい)
Vue 3 以降で非推奨の流れ Vue 3 では Decorator が公式サポートされていない

🟠 【Composition API のメリット】

特徴 内容
型推論が強い ref / computed で型がはっきりわかる
ロジックの再利用が簡単 useXXX という composable にまとめられる
コードが整理しやすい 関連する処理(data, computed, methods)を1か所にまとめられる
Vue 3 以降もそのまま移行可能 将来の Vue バージョンでも安心

🟣 【公式ドキュメントの立場】

Vue 3 の公式ドキュメントでも「Composition API の採用を推奨」。

クラスコンポーネントは今後メンテナンス対象外。

Vue 2.7 でも Composition API が公式対応されているのは