Composition APIにする最大のメリットは、状態（state）、ロジック（methods）、副作用（watch, lifecycle）を小さな単位で自由に再利用できることです。
| パターン名 | 説明 | 具体例 |
|---|---|---|
| Composable関数パターン | 共通ロジックを外部関数に切り出す | useForm, useFetch, useModalなど |
| Props/Emitの型安全化 | 親子間データ受け渡しを厳格に管理する | defineProps<>, defineEmits<>で型を明示 |
| リアクティブなデータ管理 | ref, reactiveで状態管理を単純化する |
const count = ref(0) |
| 副作用とロジックの分離 | watchやAPI通信処理を外部に逃がす | useApi、useWatcherなどで整理 |
| 型付きイベント設計 | emitするイベントも型で制御する | emit('submit', payload: UserData)型定義 |
コンポーネント外部に切り出した、再利用可能な小さなロジック集です。
例として、「テキストのバリデーションロジックだけ」を外に出すことができます。
// ファイル名: useTextValidation.ts
import { ref } from 'vue';
// 文字数制限のバリデーションをするComposable
export function useTextValidation(maxLength: number = 50) {
// 入力テキスト
const text = ref('');
// バリデーションチェック
const isValid = () => text.value.length <= maxLength;
return { text, isValid };
}