Vue 3を使ってみた感想。Vue 2からアップグレードすべき？

大幅に変化したVue.js バージョン3

実際に使ってみるとすぐにわかりますが、Vue.js 3は従来のバージョンとかなり作法が変わっています。ベースの部分はVue.jsのままですが、setup関数が新設されたり、filter・mixinが廃止されたりと、ドラスティックな変更が入っているイメージです。

筆者は今回のプロジェクトでVue.js 3を初めて触ったんですが、プレーンなプロジェクトでテストしながら、最初の1時間くらいはドキュメントと睨めっこしながら、挙動をチェックしてようやく感覚が掴めた感じでした。

Vue.js バージョン3のよかった点

Composition APIがいい感じ

まだプロジェクトの半ばなので、隅々までVue.js バージョン3を理解しているわけではないですが、プロトタイプを作成した程度で感じたメリットは、setup関数をはじめとしたComposition APIの導入でしょう。

これまで、リアクティブなデータのやり取りは、watchやcomputedを使っていましたが、Vue.js 3なら、簡単なものならsetup関数で完結しますし、setup関数内でcomputedも使えます。何より、setup関数にデータ処理系を完結させることが可能なので、一箇所に処理をまとめられるのはメリットと感じました。

コンポーネント間のデータのやりとりが楽になった

また、コンポーネント間のデータのやり取りも改善していては、provided、injectedを使って、比較的簡単にデータの受け渡しができるようになりました。これまで、propsやemitやらで無理矢理受け渡す方式だったので、ここも良い改善ポイントだと思いました。

Vue.js バージョン3の微妙だった点

まだ非対応プラグインが多い

Vue.js バージョン3を使ってみて一番微妙だと思ったのは、プラグイン系で非対応のものが多いこと。メジャーなプラグインは対応していますが、筆者の愛用している一部のマイナープラグインはVue.js バージョン3には非対応でした。

この辺りは時間が解決してくれるとも思いますが、古いプラグインなどは更新されない可能性があるので、自分で書き直すなどの対処が必要です。

情報が少ない

Vue.js バージョン3がリリースされたのが2020年9月18日で、1年半くらい経っていますが、ドラスティックな変更が加わったためか、もしくはReactにシェアを奪われているのかわかりませんが、Vue.js バージョン3関連の情報がまだ少ないと感じました。

main.jsの書き方など「とりあえず使ってみた」系の記事はあるんですが、もっと深いところを知りたいと思っても、日本語の記事は乏しく、海外の記事でもバリエーションは広くないイメージです。

Vue.js バージョン3で仕組みが変わった＆若干複雑になったので、サンプルなどが増えてくれると助かりますね。

既存のVueプロジェクトはVue 3にアップグレードすべき？

ここは難しいところですが、軽量なプロジェクトなら比較的すぐにアップグレードができるかと思います。軽量化・高速化というメリットがあるのでアップグレードしても良いと思います。

大規模なプロジェクトに関しては、大幅な書き換えが生じるため、アップグレードコストと相談になると思います。ただ、コードが短く出来たり、便利な機能がたくさん追加されているので、長期的な視点ではメリットの方が大きくなるのではと思います。