🟢 1.5 リアクティビティ（reactivity）の発想 → 「変わったら勝手に変わる」

✅ 【要点】

• リアクティビティ（reactivity）とは？ → 「データが変わったら勝手に見た目も変わる仕組み」
• 手動で textContent をいじる必要がなくなる
• Vue では ref() や reactive() を使うと「リアクティブな変数」になる
• → それを使っている DOM も自動で更新される
• だから人間が「更新処理」を書かなくていい → ミスが減る / コードが減る

🟠 【ふつうの JavaScript（リアクティブじゃない世界）】

let count = 0;
const countElement = document.getElementById('count')!;

function increment() {
  count += 1;
  countElement.textContent = count.toString(); // ← 手で更新しないと変わらない
}

document.getElementById('btn')!.addEventListener('click', increment);

❌ → データ（count）と画面（countElement）がバラバラ。

❌ → 更新忘れるとバグる。

🟢 【Vue（リアクティブな世界）】

<template>
  <p>{{ count }}</p> <!-- ← 自動で更新される -->
  <button @click="increment">+</button>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// count がリアクティブ → 変わると自動で DOM も変わる
const count = ref(0);

const increment = () => {
  count.value += 1; // ← これだけでOK
};
</script>

✅ → count.value を変えただけで画面も変わる

✅ → 「勝手に変わる」 = リアクティブデータ

🟣 【なぜ「勝手に変わる」のか？】

Vue の内部で

• ref(0) → Proxy（プロキシ）という仕組みで監視