Composition API
Setup function、ref、reactive、computed、watch、lifecycle hooks、composables、script setup
1Vue 3 における Composition API とは何ですか？
Vue 3 における Composition API とは何ですか？
回答
Composition API は、options（data、methods、computed）の代わりに composition function を使って Vue コンポーネントのロジックを整理する新しい方法です。オプションの種類ごとではなく機能ごとにロジックをまとめられるため、composables を通じてコードの再利用が容易になります。また、TypeScript のサポートが向上し、複雑なコンポーネントの整理にも適しています。
2Composition API でコンポーネントのロジックを定義するために使われる主要な関数は何ですか？
Composition API でコンポーネントのロジックを定義するために使われる主要な関数は何ですか？
回答
setup() 関数は Composition API のエントリーポイントです。コンポーネントの作成前、つまり created() よりも前に実行されます。引数として props とコンテキストを受け取り、template に公開するデータや関数を含むオブジェクトを返す必要があります。ref、reactive、computed、watch や Composition API の lifecycle hooks を使うのはこの setup() の中です。
3ref() と reactive() の主な違いは何ですか？
ref() と reactive() の主な違いは何ですか？
回答
ref() はプリミティブ値またはオブジェクトに対するリアクティブな参照を作成し、script 内では .value を介してアクセスします（ただし template 内では自動的にアンラップされます）。reactive() はオブジェクトと配列に対してのみリアクティブな proxy を作成し、.value は不要ですが、分割代入するとリアクティビティを失います。ref() はプリミティブに対してより汎用的で、reactive() は複雑なオブジェクトに対してより自然ですが、分割代入には toRef/toRefs が必要です。
setup() 関数の中で ref の値にアクセスするにはどうすればよいですか？
Composition APIでcomputedプロパティを作成するにはどうすればよいですか？
+21 面接問題