v-memo サブツリーレンダリングのメモ化
最終更新：2026-10-22
v-memo サブツリーレンダリングのメモ化
v-memo は依存配列を受け取ります。配列の値が変わらない場合、サブツリー全体の更新がスキップされます。非常に長いリストのパフォーマンスツールです（Vue 3.2+）。
| グループ | ディレクティブ |
|---|---|
| 種類 | ディレクティブ |
| スコープ | テンプレート |
| Vue バージョン | 3.2+ |
| SSR 対応 | 対応 |
📝 構文
<div v-memo="[valueA, valueB]">...</div>
<li v-for="item in list" :key="item.id" v-memo="[item.selected]">⚙️ 引数
| expression | 依存値の配列。配列の要素が前回とすべて等しい場合は更新をスキップします（空配列は v-once と同等） |
|---|
戻り値：ディレクティブ。戻り値なし
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
The number only updates when the dependency changes — a demo of skipping updates in long lists.💡 ポイント
⚠️ 注意 パフォーマンスに本当にボトルネックがある場合のみ使用してください。依存の指定を誤るとデータが更新されなくなります。
ℹ️ 補足 v-for との組み合わせが主な用途です。v-memo="[item.selected]" により、未選択の項目が diff をスキップします。
💡 ヒント v-memo="[]" は v-once と同等（再レンダリングされない）です。
🏷️ 関連ディレクティブ
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q いつ v-memo を使うべきですか？
A リストのレンダリングに明らかな遅延があるとき（長いリスト + 大量の静的コンテンツ）です。まずプロファイリングでボトルネックを確認してから導入します。
Q 依存配列を間違えるとどうなりますか？
A 書き忘れると、更新すべきときに更新されません。書きすぎる場合は最適化の効果が失われるだけです。
Q v-once との関係は？
A v-memo="[]" は v-once と同等（再レンダリングなし）です。通常の v-memo は条件付きのスキップです。
