Vue.jsで大きなObjectを扱うときはObject.freezeすると100倍くらい速くなるよ

タイトル通りなのでとりあえず結果を見てもらいましょう。

See the Pen EMNpVM by isuke (@isuke) on CodePen.

実行結果 ↓

正確な測定ではないですが明らかな速度の違いがわかります。

と、言うことで大きなObjectを扱うときはObject.freezeするといいよ。

(新旧の差をとって、差分だけ更新しようとしていた私の苦労は何だったんだ。)

ちょっと注意

• 件のObjectをレンダリングする場合はこれをしてもボトルネックの解消にはならない可能性があります。結局レンダリングに時間かかっちゃいますからね。
• devtoolsが有効になっているかどうかで結果に差があるかもです。devtoolsがゴニョゴニョしているかもしれないので。
• vuexの場合、strictモードが有効かどうかで結果に差があるかもです。参考1 参考2

参考