了解しました！
それでは教科書スタイルに則り、
次のステップ「3.1 クラス構文 vs Composition API」をしっかり書きます！
この章では、クラスコンポーネントとComposition APIの基本的な思想の違いを整理し、理解を深めます。
クラスコンポーネントでは、**OOP（オブジェクト指向プログラミング）**の考え方をベースに、
デコレーター (@Component, @Prop, @Emit, @Watch) を使って、コンポーネントをクラス形式で定義します。
import { Vue, Component, Prop, Emit, Watch } from 'vue-property-decorator';
@Component
export default class ExampleComponent extends Vue {
@Prop() readonly title!: string;
dataValue = 0;
@Watch('dataValue')
onValueChange(newVal: number, oldVal: number) {
console.log(newVal, oldVal);
}
@Emit('clicked')
handleClick() {
return this.dataValue;
}
}
| 項目 | 説明 |
|---|---|
| OOPスタイルに近い | JavaやC#などのクラスベース言語経験者には馴染みやすい |
| デコレーターで宣言的に書ける | @Propや@Watchなどが直感的で読みやすい |
| 型推論が強力 | TypeScriptと親和性が高い（ただしdecorator依存） |
| 項目 | 説明 |
|---|---|
| Vue独自の特殊な書き方 | Vueの標準的なOptions API/Composition APIとは異なる世界観になる |
| デコレーター依存 | TypeScriptのデコレーター仕様に依存し、将来の保守が不安定 |
| 複雑な機能をまたぐとコードの見通しが悪くなる | data/methods/watchersがバラバラに存在し、横断的な機能管理がしづらい |