VueSchoolに「大規模なVue.js 3アプリケーションを構築するための6つのTips」が公開された。

大規模なVue.jsアプリケーションを構築する方法シリーズの第3回目である。

この記事では、大規模なVue.jsアプリを開発した経験から得た6つのTipsを紹介している。

Tip1: MixinよりもComposableを優先する

Vue 3では、再利用可能なロジックの塊を作成できるようになり、一般的に「Composable」と呼ばれている。
ComposableはMixinと似たような機能を持つが、いくつかの利点があるという。

• コンポーネントのデータやメソッドなどの透明性の高いソースを提供する
• 名前の衝突をなくす
• IDEが解釈してオートコンプリートなどが可能な、単なるJavaScriptである

これらのことから、大規模なVue.js 3アプリでは、mixinではなくcomposableを使用することを勧めている。
Composableとはどのようなものか、MixinとComposableの比較例などもある。

他のTipsは以下にようになっている。

Tip2: コンポーネント間で常にオブジェクトをクローンする
Tip3: 名前空間付きVuexストアモジュールの使用
Tip4: テストを書く
Tip5: REST APIをSDKで操作する
Tip6: サードパーティ製ライブラリのラップ

記事は以下のように述べている。
「Vue 3は、大規模なWebアプリケーションを開発するための優れたソリューションですが、注意しないと、Vue 3を活用するどころか、逆効果になってしまう可能性があります」
「Vue 3を最大限に活用するために、次の大規模アプリケーションにこれらの6つのTipsを検討してください」

6 Tips for Building Large Scale Vue.js 3 Applications

シリーズの別の記事はこちら
How to Structure a Large Scale Vue.js Application
ESLint and Prettier with Vite and Vue.js 3