［Vue.js］v-once（1度だけ表示）
公開日：2026-02-20
更新日：2026-02-20
更新日：2026-02-20
1. 概要
v-once で1度だけレンダリングします。
動作確認：Vite 7.3.1、Vue.js 3.5.25
動作確認：Vite 7.3.1、Vue.js 3.5.25
2. サンプル
2.1 コード
src/App.vue
実行結果
コード
<script setup lang="ts">
import { ref } from 'vue';
const value = ref(10);
</script>
<template>
<p v-once>{{ value }}</p>
<p>{{ value }}</p>
<button @click="value++">+</button>
</template>実行結果
2.2 説明
v-once が指定された要素は、1度だけレンダリングされます。
使用した ref の値が変更されても再描画されません。
上記のサンプルの場合は、ボタンをクリックすると、v-once が指定されていない方だけカウントアップしていきます。
使用した ref の値が変更されても再描画されません。
上記のサンプルの場合は、ボタンをクリックすると、v-once が指定されていない方だけカウントアップしていきます。
