Composition API
別名: コンポジションAPI / script setup / setup 関数
Vue 3 で導入された、コンポーネントのロジックを ref / reactive / computed などの関数で組み立てる書き方。
Options API と違いロジックを関心ごとにまとめられる一方、リアクティビティの仕組みを理解していないと参照が切れる。
公開:
定義
Composition API は、Vue.js 3 で導入されたコンポーネントの記述方式です。data / methods / computed といった枠に分けて書く Options API に対し、ref() や reactive() などの関数を組み合わせてロジックを直接組み立てます。
同じ関心ごとのコードを 1 か所にまとめられるため、コンポーネントが大きくなっても処理を追いやすくなります。
詳細
実体は setup() の中で呼ぶ関数群で、単一ファイルコンポーネントでは <script setup> という糖衣構文を使うのが標準です。<script setup> のトップレベルで宣言した変数と import はそのままテンプレートから参照でき、コンポーネントの登録も import だけで済みます。
状態は ref() で包み、JavaScript 側では .value で読み書きします。computed() や watch() も同じく関数として呼び出します。
よくある誤解
「Composition API は Options API の置き換えで、古い書き方は非推奨になった」というのは誤りです。
公式は両方をサポートし続けると明言しています。
また <script setup> は this を持たないため、Options API の感覚で this.foo と書くと undefined になります。
関連
reactive() の分割代入で反応が消える問題は Vue 3 の Composition API で reactive を分割代入してリアクティビティが失われる、this が使えない件は Vue 3 の script setup で this が使えない を参照してください。