Vue3 v-memo ディレクティブ

Vue3 内置指令Vue3 組み込みディレクティブ

v-memoこのディレクティブは、テンプレートのサブツリーをメモ化（memoize）するために使用され、依存値の配列を指定することで更新をスキップするかどうかを決定します。

Vue 3.2+ バージョンでのみ使用できます。

基本説明

v-memoこのディレクティブは、テンプレートの一部をメモ化することを可能にします。固定長の依存値の配列を期待します。配列内の各値が前回のレンダリング時と同じ場合、サブツリー全体の更新がスキップされます。

  • 期待される型: any[]
  • 機能: 依存値の配列を指定して更新をスキップするかどうかを決定し、テンプレートのサブツリーをメモ化します。

基本構文

例

<!-- valueA と valueB が両方とも変わらない場合、更新をスキップ -->
<div v-memo="[valueA, valueB]">
  <!-- 内容 -->
</div>

<!-- 空の配列は v-once と同等 -->
<div v-memo="[]">
永遠に更新されない
</div>

使用シーン

1、長いリストの最適化

v-memo は大きなリストを扱う際に特に有用で、更新が不要なリスト項目をスキップできます：

例

<template>
  <div class="list">
    <div
     v-for="item in items"
     :key="item.id"
     v-memo="[item.isSelected, item.isExpanded]"
     class="item"
   >
      <div class="header">{{ item.title }}</div>
      <div v-if="item.isExpanded" class="content">
        {{ item.description }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
{ id: 1, title: '标题1', description: '描述1', isSelected: true, isExpanded: false },
{ id: 2, title: '标题2', description: '描述2', isSelected: false, isExpanded: true }
      ]
    }
  }
}
</script>

v-memo と v-once の違い

ディレクティブ機能適用シーン
v-once永遠に更新されないコンテンツが完全に静的で、一切の更新が不要
v-memo依存が変わらない場合は更新しない特定の依存が変化した場合にのみコンテンツの更新が必要

Vue3 内置指令Vue3 組み込みディレクティブ

その他の拡張