［Vue.js］v-memo

公開日：2026-02-20
更新日：2026-02-20

1. 概要

v-memo で指定した値と異なる場合のみ再レンダリングするようにします。

動作確認：Vite 7.3.1、Vue.js 3.5.25

2. サンプル

2.1 コード

src/App.vue

コード

<script setup lang="ts">
import { ref } from 'vue';

const fruits = ref([
  { id: 1, name: 'りんご' },
  { id: 2, name: 'みかん' },
  { id: 3, name: 'いちご' },
]);

const update = () => {
  // 「!」は非nullアサーション演算子。コンパイラに null ではないことを伝えてコンパイルエラーを回避する。
  fruits.value[0]!.name = '青りんご';
}
</script>

<template>
  <ul>
    <li v-for="fruit in fruits" :key="fruit.id" v-memo="[fruit.id, fruit.name]" >{{ fruit.name }}</li>
  </ul>

  <button @click="update">変更</button>
</template>

実行結果

2.2 説明

ボタンを押すと fruit.name が変更されて、{{ fruit.name }} が再描画されます。

この時、裏では、コンポーネント内で作成された ref の値の変更を検知して、
コンポーネントの VNode ツリー（仮想DOM）を再構築します。
親は影響を受けません。子は再構築されます。

そして、VNode ツリーを前回のものと比較して、差分がある場合は再描画します。

ここで v-memo にコンポーネントで表示する値を指定しておくと、
その値だけを比較して、レンダリングするかどうかを決定します。
これにより、比較のために VNode ツリーを再構築する必要がなくなり、レスポンスが向上します。

但し、通常は v-memo を付けなくても十分速いので問題ありません。
複雑なコンポーネントや大量に項目があるリストなどがある場合は、v-memo を付けるとレスポンスが良くなる場合があります。

＜前の記事

v-once（1度だけ表示）

次の記事＞

change イベント

［Vue.js］v-memo

1. 概要

2. サンプル

2.1 コード

2.2 説明

新着一覧

アーカイブ

以前のカテゴリー一覧