第3章：クラスコンポーネントとComposition APIの考え方の違い

3.2 デコレーターとアノテーションの扱い方

この節では、クラスコンポーネントで使われていたデコレーターと、Composition API移行時の対応方法を整理します。

■ クラスコンポーネントにおけるデコレーターの役割

クラスコンポーネントでは、次のようなデコレーターを使って、宣言的にコンポーネントの要素（props, methods, computed, etc.）を定義していました。

デコレーター名	役割
`@Component`	コンポーネントクラスであることを宣言
`@Prop`	propsを定義
`@Emit`	子コンポーネントからイベントをemitする
`@Watch`	特定のデータの変化を監視する
`@State`	Vuexのstateをマッピングする
`@Getter`	Vuexのgetterをマッピングする
`@Mutation`	Vuexのmutationをマッピングする
`@Action`	Vuexのactionをマッピングする

■ 例：デコレーターを使ったコード

import { Vue, Component, Prop, Emit, Watch } from 'vue-property-decorator';

@Component
export default class ExampleComponent extends Vue {
  @Prop() readonly title!: string;

  count = 0;

  @Watch('count')
  onCountChanged(newVal: number, oldVal: number) {
    console.log(newVal, oldVal);
  }

  @Emit('incremented')
  increment() {
    this.count++;
    return this.count;
  }
}

■ Composition APIではどうする？

Composition APIでは、デコレーターの代わりに、明示的な関数呼び出しで同じ機能を実現します。

デコレーター	Composition APIでの対応方法
`@Component`	`<script setup>`によって暗黙的にコンポーネント化
`@Prop`	`defineProps()`関数を使用
`@Emit`	`defineEmits()`関数を使用
`@Watch`	`watch()`関数を使用
`@State`, `@Getter`, `@Mutation`, `@Action`	コンポーザブル関数経由、もしくは`store`インスタンスを直接使う