了解しました！

ここでは「第5章：Vueインスタンスとリアクティブデータ」の中心テーマである、

data、methods、computed、watchの違いを、一つの明確な例を使って解説します。

✅ 要点まとめ

種類 役割 主な用途
data 値の定義（状態） 表示したいデータを持つ
methods 関数（動作） ボタンが押されたときなどの処理
computed 計算された値 他のdataを使って作られる派生データ
watch 値の変化を監視 値が変わったときに反応して何かをする

📄 ファイル名：ReactiveTypes.vue

<template>
  <!-- name に入力された値 -->
  <input v-model="name" placeholder="名前を入力" />

  <!-- methods：ボタンクリックでメッセージ生成 -->
  <button @click="generateMessage">メッセージ生成</button>
  <p>{{ message }}</p>

  <!-- computed：name から自動的にあいさつを生成 -->
  <p>自動あいさつ: {{ greeting }}</p>

  <!-- watch：name が変わるとログを出力 -->
</template>

<script lang="ts" setup>
// Vue の Composition API 用
import { ref, computed, watch } from 'vue';

// data：name と message を定義
const name = ref('');
const message = ref('');

// methods：ボタンでメッセージを作る関数
const generateMessage = () => {
  // 入力された名前を使ってメッセージを作る
  message.value = `${name.value}さん、こんにちは！`;
};

// computed：name から自動で計算された値
const greeting = computed(() => {
  // name に応じて別のあいさつを返す
  return name.value ? `こんにちは、${name.value}さん！` : '名前を入力してください';
});

// watch：name の変更を監視してログを出力
watch(name, (newValue, oldValue) => {
  // name が変更されたら、コンソールに前と今の値を出力
  console.log(`nameが「${oldValue}」から「${newValue}」に変わりました`);
});
</script>

🧩 一行ずつの解説

<template> 部分

<!-- name に入力された値 -->
<input v-model="name" placeholder="名前を入力" />


<!-- methods：ボタンクリックでメッセージ生成 -->
<button @click="generateMessage">メッセージ生成</button>


<p>{{ message }}</p>


<!-- computed：name から自動的にあいさつを生成 -->
<p>自動あいさつ: {{ greeting }}</p>