［Vue.js］ref オブジェクト
公開日：2026-02-19
更新日：2026-02-19
更新日：2026-02-19
1. 概要
値の変更を検知して反映する ref オブジェクトについてです。
動作確認：Vite 7.3.1、Vue.js 3.5.25
動作確認：Vite 7.3.1、Vue.js 3.5.25
2. サンプル
index.html と src/main.ts は、「Hello, World」で作成したものを使用します。
2.1 コード
src/App.vue
コード
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0); // ref オブジェクトの取得
const countUp = ()=> {
count.value++;
}
</script>
<template>
<button @click="countUp">Count Up</button><br /><br />
{{ count }}
</template>2.2 説明
ref（ref オブジェクト）を使用すると、値の変更があった場合、それを検知して、使用している箇所に反映します。
上記コードでは、count を ref にしているため、クリックした際に count を増やすと、即座に画面に反映されます。
「let count = 0」で宣言していた場合は、反映されません。
ref の値は、スクリプトでは .value を付け、テンプレートでは .value を付けずに使用します。
上記コードでは、count を ref にしているため、クリックした際に count を増やすと、即座に画面に反映されます。
「let count = 0」で宣言していた場合は、反映されません。
ref の値は、スクリプトでは .value を付け、テンプレートでは .value を付けずに使用します。
