Vue｜Vue3.x系のクラススタイルについて調査

Vueのクラススタイルについて調べてみました（2023.06.22）

この記事は、Vueを学んでいる筆者がクラススタイルについて調査したメモになります。

公式ドキュメント

2.x系の公式ドキュメントにはTypeScriptとの親和性について、以下のように書かれています。

ここにクラススタイルの記法が紹介されており、オブジェクト指向になれているなら一番しっくりくる書き方です。

しかし、Vue.2x系のサポートは2023.12.31に終了します！！！

クラススタイルは、vue-property-decoratorやvue-class-componentといったパッケージに依存するため、3.x系の移行で苦労しそうです。。。

さらにvue-class-componentは、現在メンテナンスしていないようです。

Vue3.x系のドキュメントには、TypeScriptのクラススタイル記法の説明は、無くなってました！！

クラススタイル民は、どうすれば良いのか？？状態

Vue3.x系の書籍にはVue3の中心であるComposition APIで書かれているので、2.x系のクラススタイルから移行するには情報不足感がありますし、参考にしにくいです。。。

Vue2.x系からVuw3.x系に移行するタイミングで発行された書籍は、情報が少し古くなっている（書籍なので仕方がありません）ため、やはりクラススタイルからの移行は、参考にしにくいです。。。

（追記）vue3.xのComposition APIではscriptタグにsetupを追記すると、かなりスッキリ書くことができます！

なんとなくdataやmethodやらを纏めて定義してreturnするのが気持ち悪いと感じていたのですが、setupを追記すればこの辺は解消されます。

script内で変数の値を更新したり、取得したりするのにxxx.valueという書き方が必要ですし、this.xxxの書き方は不要になりますが、

個人的にはComposition APIの方がスッキリできて、コーディングしやすい印象をもっています。

そもそもVue3.x系でクラススタイルを使うには、Vueがクラススタイルについてどのような方向に舵を切ったか？最新情報を整理する必要がありそうです。Vue3ではクラススタイル自体は、ないはず。。。

筆者個人の考えは、これからVueを使うならComposition APIを使って学ぶと良さそうです。しかし、現場がどのように書いてるか？も、これからVueを学習するエンジニアにとって重要要素になり、Vueの良さである多様な書き方が、その反面学習コストが大きくなる要因になっている気もします。