Vue 3（Composition API）では、ref、computed、const をそれぞれ使い分けることで、状態管理や画面表示をシンプルに書くことができます。
この記事では、それぞれの役割と使い分け方を個人的なノートとして残しています。
結論：使い分けの早見表
| 目的 | 使うべき型 | 説明 |
|---|---|---|
| 値をUIとリアクティブに連動させたい | ref() |
入力欄やボタンなど、値の変化に応じてUIを更新するため |
| 他の値に依存した計算結果を表示したい |
computed() |
元の値が変化したら、自動的に再計算されてUIを更新 |
| 一度だけ使う定数や固定値 | const |
UIと連動しない、変化しないデータ。単なる定数などに使う |
ref：リアクティブな「箱」
Vueに「この値の変化を監視してほしい」と伝えるのが ref()。
import { ref } from 'vue'
const name = ref('')
テンプレートでは .value を省略して使えます：
<template>
<input v-model="name" />
<p>こんにちは、{{ name }}さん！</p>
</template>
ユーザーが入力した文字が name にリアルタイムで入り、それが画面に反映される、というのが Vue の強みです。
computed：他の値に依存する計算結果
computed() は、ある ref や reactive な値に基づいた派生的な値を計算するために使います。
const count = ref(1)
const double = computed(() => count.value * 2)
この double は count が変わるたびに再計算されます。
テンプレートではそのまま使えます：
<p>カウントの2倍：{{ double }}</p>
※ここで ref を使って const double = ref(count.value * 2) のようにしてしまうと、一度しか計算されず、count が変わっても更新されません。要注意。
const：固定値や非リアクティブなデータに使う
リアクティブにする必要がない「定数」や「一度だけ表示する文字列」には const を使います。
const title = 'Vue 3 入門'
たとえば、ページタイトルや固定のラベル文など。
テンプレートでもそのまま使えます：
<h1>{{ title }}</h1>
よくある間違い
❌ refを使わずに変数を定義する
// これはVueにとってリアクティブではない
let name = ''
これでは name の変化をVueが検知できません。
→ UIと連動したいなら必ず ref() を使う。
❌ ref を計算処理に使う
// ❌ 非推奨：countが変わってもdoubleは変わらない
const double = ref(count.value * 2)
→ 正しくは：
// ✅ 推奨：computedで自動再計算
const double = computed(() => count.value * 2)
まとめ
- ユーザー入力やクリックに反応させたい →
ref - 他の値に基づく計算を自動で行いたい →
computed - 変化しない定数やUIと無関係な値 →
const
この3つを使い分けることで、Vue 3 のコードはよりシンプルで直感的になります。
以上が ref / computed / const の基本的な使い分けになります。