Vue 3のComposition APIにおいて、コンポーネントのロジックを記述するエントリーポイントとなる関数はどれですか？

解説

正解は「setup()」です。Composition API（関数を組み合わせてロジックを書く Vue 3 の記法）では、リアクティブな状態（値が変わると画面が自動で更新されるデータ）や関数、ライフサイクルフックの登録などを setup() の中に書き、テンプレートで使うものを return で返します。setup() の基本形<script> import { ref } from "vue"; export default { setup() { const count = ref(0); // リアクティブな状態を作る const increment = () => { count.value++; }; // script 内では .value で読み書きする return { count, increment }; // テンプレートで使えるように公開する }, }; </script> <template> <button @click="increment">{{ count }}</button> </template>現在は、これを簡潔に書ける <script setup> が主流です。この書き方ではトップレベルのコードがそのまま setup の中身として扱われ、return なしで変数をテンプレートから使えます。setup() を直接見かけないことが多いのはこのためです。誤答が当てはまらない理由「data()」は Options API（data・methods などのオプションに分けて書く従来の記法）で状態を定義する関数です。「created()」も Options API のライフサイクルフックです。setup() はこれより前に実行されるため、created で書いていた初期化処理は setup 内に直接書けます。「defineComponent()」はコンポーネント定義を包んで TypeScript の型推論を効かせる補助関数で、ロジックを書く場所ではありません。setup() の中では this でコンポーネントにアクセスできないOptions API に慣れていると、this.count のように書きたくなりますが、setup() の中の this はコンポーネントのインスタンスを指しません。props は第1引数、emit などは第2引数の context から受け取ります。setup(props, { emit }) { console.log(props.title); // this.title ではなく props から読む emit("change"); // this.$emit ではなく引数の emit を使う }参考Composition API: setup() | Vue.js<script setup> | Vue.js