過去バージョン

Options API のポイント

• すべてのメソッドは methods: オブジェクト内に並べる
• メソッド内では this で data / props / 他メソッド / computed にアクセス
• アロー関数で書いてはいけない（this が外側の this になってしまう）
• 非同期処理 (async/await) もそのまま使える

2. Composition API +

Composition API のポイント

• メソッドは通常の関数として

  子→親通信: emit

  ライフサイクルとメソッドの組合せ

  Options API	Composition API	タイミング
  beforeCreate	setup() 直前	インスタンス作成前
  created	setup() 内	インスタンス作成済 / DOM 前
  beforeMount	onBeforeMount	DOM 挿入直前
  mounted	onMounted	DOM 挿入後（API 呼出はここ）
  beforeUpdate	onBeforeUpdate	再レンダリング前
  updated	onUpdated	再レンダリング後
  beforeUnmount	onBeforeUnmount	破棄直前
  unmounted	onUnmounted	破棄完了

  composables（ロジックの再利用）

  Composition API の真価。メソッド + 状態をまとめて切り出し、他のコンポーネントで再利用できます:

  // composables/useCounter.js
  import { ref, computed } from 'vue';
  
  export function useCounter(initial = 0) {
    const count = ref(initial);
  
    const increment = () => count.value++;
    const decrement = () => count.value--;
    const reset = () => count.value = initial;
  
    const isZero = computed(() => count.value === 0);
    const doubled = computed(() => count.value * 2);
  
    return { count, increment, decrement, reset, isZero, doubled };
  }

  FAQ

  Q: Options API と Composition API はどちらを使うべき？
  A: 公式は新規プロジェクトでは Composition API を推奨。ただし Options API も将来も使えます。チームに合わせて選択。

  Q: this がうまく動かない
  A: Options API の methods 内でアロー関数を使っていないか確認してください。methods: { greet: () => { this.x } } は NG。methods: { greet() { this.x } } が正しい。

  Q: @click="greet" と @click="greet()" の違い
  A: 前者は関数参照を渡す（イベントオブジェクトが第一引数に入る）、後者はその場で呼び出して戻り値を渡す。引数を渡したいときだけ括弧を付けます。