👁️‍🗨️ 5-3. @Watch デコレーター → watch / watchEffect への変換

✅ 要点まとめ

• クラスコンポーネントでは @Watch('変数名') を使う。
• Composition API では watch() または watchEffect() を使う。
• TypeScript でも型安全に書ける。
• watch: 監視する対象を指定。
• watchEffect: 依存している値が変わったら自動実行（対象を書かなくてもOK）。

🟥 変換パターン（具体例）

【クラスコンポーネントの @Watch 使用例】

// ファイル名: MyComponent.vue (クラス版)
@Component
export default class MyComponent extends Vue {
  count = 0;

  // count が変わったときに実行される
  @Watch('count')
  onCountChanged(newVal: number, oldVal: number) {
    console.log(`count changed from ${oldVal} to ${newVal}`);
  }
}

【Composition API (<script setup> 版 + TypeScript）】

<!-- ファイル名: MyComponent.vue -->
<template>
  <input type="number" v-model="count" />
</template>

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

// ref でカウントを管理
const count = ref(0);

// count が変わったときに実行
watch(count, (newVal, oldVal) => {
  console.log(`count changed from ${oldVal} to ${newVal}`);
});
</script>

🟡 watchEffect の使い方（依存を自動検知）

<!-- ファイル名: WatchEffectExample.vue -->
<script setup lang="ts">
import { ref, watchEffect } from 'vue';

const count = ref(0);

// 依存する変数を自動で探して監視
watchEffect(() => {
  console.log(`count is now ${count.value}`);
});
</script>

🟢 ポイント:

• watch: 「誰を監視するか」を指定する。
• watchEffect: 「中で何を使っているか」自動で見つけて監視する。