Vueの状態管理入門：ref と reactive を使ってUIを更新する – 8/12

Vueのリアクティブデータを実装で体験します。カウント、トグル、フォーム入力の3パターンを押さえます（Reactのstate回と対応）。

refの基本

ref は単一値をリアクティブにします。

<script setup>
import { ref } from "vue"
const count = ref(0)

const inc = () => {
  count.value++
}
</script>

<template>
  <p>Count: {{ count }}</p>
  <button @click="inc">+1</button>
</template>

count 自体はrefオブジェクトなので、スクリプト側は .value を使って更新します。テンプレート側は自動的に展開されるので {{ count }} でOKです。

トグル表示

<script setup>
import { ref } from "vue"
const open = ref(false)
</script>

<template>
  <button @click="open = !open">{{ open ? "閉じる" : "開く" }}</button>
  <p v-if="open">表示中です</p>
</template>

フォーム入力（v-model）

<script setup>
import { ref } from "vue"
const text = ref("")
</script>

<template>
  <input v-model="text" placeholder="入力" />
  <p>Input: {{ text }}</p>
</template>

練習問題

1. カウントを-1するボタンも追加してみましょう。
2. openがtrueのときだけ追加の説明文を表示してみましょう。
3. 入力欄を2つ作って「名字」「名前」を表示してみましょう。