テンプレートメモ化のためのv-memo
v-memoディレクティブ、依存配列、再レンダリングが省略される条件、computedとの比較
「テンプレートメモ化のためのv-memo」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
v-memoとは
v-memoはテンプレートの一部分をメモ化します。Vueはレンダー済みの出力をキャッシュし、列挙された依存関係のいずれかが変化した場合にのみ、そのサブツリーを再レンダーします。これは、高コストでほとんど静的なマークアップに対するパフォーマンス最適化のための切り札です。
依存配列
依存関係の配列をバインドします。配列内のすべての値が以前の値と等しい限り、Vueは要素全体とその子要素の更新をスキップします。
<div v-memo="[dep1, dep2]">
<!-- skipped unless dep1 or dep2 change -->
</div>空の配列
空の配列v-memo="[]"は、コンテンツが一度だけレンダーされ、その後更新されないことを意味します。これは、静的コンテンツを1回だけレンダーするのと同じです。
<div v-memo="[]">
<!-- rendered once, never re-rendered -->
</div>主な用途：v-for
v-memoの主な用途は巨大なリストです。v-forの内部に置き、各行が自身に関係するデータが変わった場合にのみ再レンダーされるようにします。
<div
v-for="item in list"
:key="item.id"
v-memo="[item.id === selectedId]"
>
...
</div>選択行をメモ化する
典型的な例では、何千もの行が選択状態の切り替わったときだけ再レンダーされます。item.id === selectedIdを比較することで、行は選択されたとき、または選択が解除されたときだけ更新されます。
<tr
v-for="item in items"
:key="item.id"
v-memo="[item.id === selectedId]"
>
<td :class="{ active: item.id === selectedId }">
{{ item.name }}
</td>
</tr>すべてのリアクティブな依存関係を列挙する
サブツリーが依存するすべてのリアクティブな値を含める必要があります。1つでも忘れると、その値が変化しても要素が更新されず、気付きにくい古いUIのバグになります。
<!-- WRONG: name can change but is not listed -->
<div v-memo="[item.id]">{{ item.name }}</div>v-ifと決して併用しない
v-memoをv-ifやv-forの構造ディレクティブと競合する形で、同じ要素に配置しないでください。具体的には、同じ要素上のv-memoとv-ifはサポートされておらず、動作は未定義になります。
<!-- AVOID -->
<div v-memo="[a]" v-if="show">...</div>v-memoとcomputedの比較
computedはリアクティブな状態から導出した値をキャッシュします。v-memoはレンダー済みのVNodeをキャッシュします。両者は異なる問題を解決します。computedはデータの再計算を避け、v-memoはマークアップの再レンダーを避けます。
computedで十分な場合
ボトルネックがデータの再計算（フィルタリング、ソート、フォーマット）なら、まずcomputedを使ってください。こちらのほうが単純で、誤用しにくい方法です。
import { computed } from "vue";
const sorted = computed(() =>
[...items.value].sort((a, b) => a.rank - b.rank)
);v-memoが役立つ場合
プロファイリングで、大規模リストの再レンダーが大半を占め、更新の間でほとんどの行が変わっていないと分かった場合にのみ、v-memoを使ってください。
まず計測する
v-memoにはメモリのオーバーヘッドと比較コストが発生します。小さなリストでは通常のレンダーより遅くなることがあります。実際に改善したか確認するため、必ず前後でプロファイリングしてください。
理解度チェック
v-memoを使うべきなのはどのような場合ですか？
まとめ
v-memo="[deps]"は、列挙されたすべての依存関係が変わらない間、サブツリーの再レンダーをスキップします。大規模なv-forリストの内部で特に有効です。すべてのリアクティブな依存関係を列挙し、同じ要素でv-ifと併用せず、導出値にはcomputedを優先し、実際にパフォーマンスが向上したことを確認するため、必ずプロファイリングしてください。
よくある質問
「テンプレートメモ化のためのv-memo」レッスンは無料ですか？
はい。「テンプレートメモ化のためのv-memo」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「テンプレートメモ化のためのv-memo」で何を学びますか？
v-memoディレクティブ、依存配列、再レンダリングが省略される条件、computedとの比較 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「テンプレートメモ化のためのv-memo」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- テンプレートメモ化のためのv-memo
- Vue DevToolsのPerformanceタブでプロファイリング
- 大規模リストの仮想スクロール
- VueでのWeb Worker