# Composition API (Vue.js / Nuxt.js)

> Setup function、ref、reactive、computed、watch、lifecycle hooks、composables、script setup

- 24 面接問題
- Mid-Level
- [面接問題: Vue.js / Nuxt.js](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions.md)

## 1. Vue 3 における Composition API とは何ですか？

**回答**

Composition API は、options（data、methods、computed）の代わりに composition function を使って Vue コンポーネントのロジックを整理する新しい方法です。オプションの種類ごとではなく機能ごとにロジックをまとめられるため、composables を通じてコードの再利用が容易になります。また、TypeScript のサポートが向上し、複雑なコンポーネントの整理にも適しています。

## 2. Composition API でコンポーネントのロジックを定義するために使われる主要な関数は何ですか？

**回答**

setup() 関数は Composition API のエントリーポイントです。コンポーネントの作成前、つまり created() よりも前に実行されます。引数として props とコンテキストを受け取り、template に公開するデータや関数を含むオブジェクトを返す必要があります。ref、reactive、computed、watch や Composition API の lifecycle hooks を使うのはこの setup() の中です。

## 3. ref() と reactive() の主な違いは何ですか？

**回答**

ref() はプリミティブ値またはオブジェクトに対するリアクティブな参照を作成し、script 内では .value を介してアクセスします（ただし template 内では自動的にアンラップされます）。reactive() はオブジェクトと配列に対してのみリアクティブな proxy を作成し、.value は不要ですが、分割代入するとリアクティビティを失います。ref() はプリミティブに対してより汎用的で、reactive() は複雑なオブジェクトに対してより自然ですが、分割代入には toRef/toRefs が必要です。

## さらに21問利用可能

- setup() 関数の中で ref の値にアクセスするにはどうすればよいですか？
- Composition APIでcomputedプロパティを作成するにはどうすればよいですか？

無料で登録: https://sharpskill.dev/ja/login

## その他のVue.js / Nuxt.js面接トピック

- [JavaScript の基礎](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/javascript-fundamentals.md): 20問, Junior
- [モダンな JavaScript (ES6+)](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/es6-modern-javascript.md): 20問, Junior
- [Vue の基礎](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/vue-basics.md): 22問, Junior
- [Vue コンポーネント](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/vue-components.md): 20問, Junior
- [Vue Router](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/vue-router.md): 18問, Junior
- [Pinia State Management](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/pinia-state-management.md): 20問, Junior
- [Vuex (Legacy)](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/vuex-legacy.md): 15問, Mid-Level
- [Vue のリアクティビティ](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/vue-reactivity.md): 20問, Mid-Level
- [Nuxt の基礎](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/nuxt-fundamentals.md): 22問, Mid-Level
- [Nuxt のデータフェッチング](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/nuxt-data-fetching.md): 20問, Mid-Level
- [Nuxt の SSR と SSG](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/nuxt-ssr-ssg.md): 22問, Mid-Level
- [Nuxt サーバールート](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/nuxt-server-routes.md): 20問, Mid-Level
- [Nuxt モジュール](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/nuxt-modules.md): 18問, Mid-Level
- [Vue のコンポーザブル](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/vue-composables.md): 20問, Mid-Level
- [Vue フォームとバリデーション](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/vue-forms-validation.md): 20問, Mid-Level
- [Nuxt の状態管理](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/nuxt-state-management.md): 18問, Mid-Level
- [Vue のテスト](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/vue-testing.md): 20問, Mid-Level
- [Nuxt のデプロイと CI/CD](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/nuxt-deployment-cicd.md): 22問, Mid-Level
- [Vue のパフォーマンス](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/vue-performance.md): 22問, Senior
- [Vue の高度なパターン](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/vue-advanced-patterns.md): 24問, Senior
- [VueでのTypeScript](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/typescript-vue.md): 22問, Senior
- [Nuxt認証](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/nuxt-auth.md): 20問, Senior
- [Nuxt での SEO](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/nuxt-seo.md): 20問, Senior
- [Nuxt の国際化](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/nuxt-i18n.md): 18問, Senior
- [Vue アーキテクチャ](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/vue-architecture.md): 22問, Senior
- [Nuxt セキュリティ](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/nuxt-security.md): 20問, Senior
- [Vue エコシステム](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/vue-ecosystem.md): 18問, Senior
- [Vue 2→3 & Nuxt 2→3 の移行](https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/migration-vue2-vue3-nuxt2-nuxt3.md): 22問, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ja/technologies/vue-nuxt/interview-questions/composition-api