Vue.jsでアプリケーションを開発する際、再描画（再レンダリング）が多発するとパフォーマンスに悪影響を及ぼす場合があります。特に、静的なコンテンツや頻繁に変更されない部分に対しては、Vueの再描画対象から外すことで、描画処理を効率化できます。この記事では、Vue 3におけるパフォーマンス最適化のためのディレクティブ v-once と v-memo の使い方を実例付きで解説します。
v-onceの使い方：一度だけ描画する
v-once は、指定した要素やコンポーネントを初回のレンダリング時のみ描画し、その後は更新されないようにするディレクティブです。静的な内容や再計算が不要な部分に使用します。
<template>
<h1 v-once>この見出しは一度だけ描画されます</h1>
</template>
この例では、h1タグの中身は初回の描画後は再レンダリングされず、再度変更が起きても無視されます。
使用例：パフォーマンスに配慮した静的コンテンツ
<template>
<div>
<h2 v-once>ビルド時に決まるアプリのバージョン情報</h2>
<p>現在のカウント: {{ count }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
v-memoの使い方：条件付きで再描画を制御
v-memo は Vue 3.2 以降で導入された新しいディレクティブで、依存する値が変わらない限り再描画をスキップできます。これは v-once より柔軟にパフォーマンスを最適化できます。
<template>
<div v-memo="[user.id]">
<p>ユーザーID: {{ user.id }}</p>
<p>名前: {{ user.name }}</p>
</div>
</template>
この例では、user.idが変更されない限り、このdiv内は再描画されません。ユーザー名が変わっても見た目は更新されないため、表示専用の要素や大量レンダリング時に効果的です。
v-onceとv-memoの違い
| 機能 | v-once | v-memo |
|---|---|---|
| 再描画 | 一度だけ | 依存値が変化したときのみ |
| 柔軟性 | なし（完全固定） | あり（条件付きで変化） |
| 用途 | 静的なラベルやヘッダー | 動的だけど更新頻度が少ない要素 |
まとめ
Vue.jsのv-onceとv-memoを活用すれば、描画コストの削減によってアプリケーション全体のパフォーマンスを効率的に改善できます。頻繁に再描画されるコンポーネントがある場合は、これらのディレクティブを導入することで、動作の軽量化とUXの向上につながります。特に大量リストや静的表示が多い画面では効果が顕著です。
