データの件数が増えてくるとページの読み込み処理等が遅くなってしまい、大切なユーザー体験が低下してしまいます。
この記事では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 の場合にも常にレンダリング
- 要素が false の場合は、CSS の
display: noneによって非表示
算出プロパティとウォッチャを使い分ける
テンプレートのレンダリングでは、メソッドよりも算出プロパティの方をなるべく使用するべきです。
- 算出プロパティ : 依存しているデータが変更された場合にのみ再計算される
- メソッド : 呼び出されるたびに毎回計算される
ただし、以下の場合は算出プロパティではなく、ウォッチャを使用すべきです。
- ループのような処理コストが高い
- 非同期が伴う
- 算出プロパティの依存データが複数ある場合、すべてのデータの変更を検知することができない
v-forによるリストのレンダリングではkey属性を利用する
Vue.jsのループでは以下のように一意なkey属性を使用すべきです。
<template>
<ul>
<li v-for="item in items" :key="item.id">
{{item.name}}
</li>
</ul>
</template>
key属性を使う理由は以下の３つです。
- 要素の追加や削除などの変更があった場合に、Vueはkey属性を使用して、変更が起きた要素だけを再描画することができる
- 要素が追加や削除された場合に、新しい要素と古い要素を比較し、古い要素を削除し、新しい要素を追加するといった処理を行う必要があります。key属性を使用することで、Vueは要素を一意に識別することができる
- v-forを使用した際に、一意のkeyがない場合、Vueは要素のインデックスを使用して要素を一意に識別するが、インデックスによる識別は要素の順番が変わった場合に、多くの要素が再描画される可能性があるため、パフォーマンス面でもkey属性を使用することが望ましい。
v-onceでコンポーネントのコンテンツをキャッシュする
v-onceは、要素やコンポーネントのコンテンツを一度だけレンダリングし、その後は再描画を行わないようにできます。
毎回同じ内容のデータを表示する場合はv-onceを使いましょう
<template>
<div>
<p v-once>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue.js'
}
},
}
</script>
関数型コンポーネントを利用する
以下が関数型コンポーネントとオブジェクト型コンポーネントの違いです。データを保持したり、ライフサイクルメソッドを使用する必要がある場合は、オブジェクト型のコンポーネントを使った方がいいので、場合によります。
- 関数型コンポーネント
- Vueインスタンスを生成しないため、メモリ使用量が少なく、レンダリング速度も速い
- コンポーネントのインスタンスを生成しないため、状態の保存やライフサイクルメソッドの処理が不要
- オブジェクト型のコンポーネント
- Vueインスタンスを生成するため、メモリ使用量は関数型コンポーネントより多くなる
- ステートを持つことができるため、データを保持したり、ライフサイクルメソッドを使用することができる
おわりに
動けばOKからユーザーが少しでも使いやすいと思えるプロダクトにするためにパフォーマンス向上の方法をもっと知りたいと思ったのでこれからも得た知識を発信していきます！
ではまた！
参考
- ChatGPT
- Vue.js入門 基礎から実践アプリケーション開発まで