Vue.jsでレンダリングパフォーマンス改善 - Qiita

データの件数が増えてくるとページの読み込み処理等が遅くなってしまい、大切なユーザー体験が低下してしまいます。 この記事ではVue.jsに特化してレンダリングパフォーマンスを向上させる方法を「Vue.js入門 基礎から実践アプリケーション開発まで」を参考に紹介します。 v-if & v-showを使い分ける v-if / v-showはture/falseで要素の表示・非表示を可能にしますが、v-ifは条件によって要素を削除し、v-showは要素を残しつつ非表示にする違いがあります。 v-if : 条件によって表示/非表示を切り替える必要がある場合に最適 要素が true の場合にのみレンダリング 要素が false の場合は、DOM から完全に削除 v-show: 条件によって表示/非表示を切り替える必要があるが、要素が頻繁に切り替わる場合に最適 要素が true の場合にも、false