コンポーネントのインスタンスが増えると、めちゃくちゃ重くなる。
Hoge というコンポーネントのインスタンスを動的に増やすような画面を想定します。
個数を入力して追加ボタンを押すと、その分Hogeコンポーネントのインスタンスが増えるような画面です。
Hogeインスタンスが100個ぐらいならまだ即座にリアクションしてくれます。
それ以上Hogeインスタンスが増えてくると、めちゃくちゃもっさりした動きになります。
リアクティブにDOMがレンダリングされなくなります。
対応策としては、インスタンスが100個、多いは数万個になるようなHogeコンポーネントのインスタンス数を減らせないか考えてみてください。
コンポーネントのインスタンス数を減らすには?
例えば、Hogeコンポーネントが上位のHogeUpperコンポーネントに含有できないか考えてみてください。
Hoge Upperコンポーネントの中でHogeコンポーネントを動的にレンダリングするようにします。
そうすると、生成されるインスタンス数はHoge Upperコンポーネントの数になります。
例えば、Hogeコンポーネントに該当するインスタンスを10000個作るとします。
Hogeコンポーネントが最小コンポーネント(プランA)だとすると、インスタンスは10000個になります。
Hogeコンポーネントを諦めて、Hoge Upperコンポーネントを最小にすると、Hoge Upper コンポーネントを100個作り、その中でHogeコンポーネントに相当するDOMを100個ずつレンダリングするという方法がとれます。(プランB)
そうすると、全体のインスタンス数は100個になり、プランBの方が劇的に速度が向上します。これは、プロジェクトであった実例です。
おそらく、Vue.componentで定義されたインタンスは、そんなに機能が多くなくてもインスタンス化された時点で一定のメモリを使用するからだと思います。
リアクティブなレンダリングをVueでやるのを諦める
ローカルコンポーネントが10000個あったとして、最も改善効果があるのはプランBのように、インスタンス数を減らすことです。
それでも重い場合は、Vueでやるのをやめて、jQueryなどによるDOM操作でやりたいことができないか?を考えます。
Hogeコンポーネントの100個のインスタンスすべて、何かをトリガーに各々が動いてしまうのは良くありません。そりゃ重くなります。
そこで、各々が動いて何がしたいかにもよるのですが、各々がVueの機能でレンダリングするのではなく、DOM操作で100個のうちから対象をセレクタで抽出し、クラスを書き換えるということも可能です。
DOM操作だけで良いものは、Vueコンポーネントの機能でやるのではなく、jQueryを使った方が100万倍高速です。
DOM操作とVueがリアクティブにレンダリングする反応速度は、比較にならないほど、DOM操作の方が早いと知っていただけるといいと思います。
抽象的な話になってしまいましたが、プランBのようにインスタンス数を減らせないか考えること、DOM操作で実現できないかを考えることが、劇的に速度を向上する方策になります。