Vue 3 の ref と computed の違いについて

Posted at 2025-05-20

ref と computed の違いってけっこう混乱しやすいポイントだと思います。どっちも「リアクティブ（反応的）」って書いてあるし、見た目も似てるし、どう使い分ければいいの？って思いました。

ref は「変えられる値」

ref は、基本的に「自分で値をセットするもの」です。
たとえば、カウントアップするような数値や、ユーザーが入力した値を保持するような場面で使います。

const count = ref(0)

function increment() {
  count.value++
}

テンプレートで使うときは、.value をつけずにそのまま使えます。

<p>{{ count }}</p>

このように、ref は .value を使って中の値を読んだり、書き換えたりします。リアクティブなので、count.value が変わると、それを使っているテンプレートも自動で更新されます。

一方で、computed は、自分では値を変えません。
代わりに、「他の値が変わったら、自動で再計算してくれる」便利な関数です。

const firstName = ref('マチス')
const lastName = ref('太郎')

const fullName = computed(() => {
  return `${lastName.value} ${firstName.value}`
})

この場合、fullName は lastName や firstName が変わったときだけ、自動で再計算されます。そしてその値をテンプレートなどで使えます。
「他の値から計算される値」 、「読み取り専用」 というのがポイントです

どっちを使えばいいの？

たとえば :