Vue 3 では、Composition API が導入されました。これは、コンポーネント ロジックをより柔軟に編成および再利用するために使用される新しい複合関数 API です。 Vue 2 の Options API と比較して、Composition API はより優れた構成可能性とコードの再利用性を提供します。以下は、Vue 3 の Comboposition API の概要と使用法です。
-
Composition API の紹介: Vue 3 では、
setup()関数を使用して Composition API を導入できます。setup()関数は、コンポーネントの作成前に実行される特別な関数で、2 つのパラメータpropsとcontextを受け取ります。setup()関数で複合 API を使用して、コンポーネントのロジックを編成できます。 -
合成関数: 合成 API は、一連の合成関数を通じてロジックの組み合わせと再利用を実装します。これらの組み合わせ関数には、
ref、reactive、computed、watchなどが含まれます。以下は、一般的に使用されるいくつかの組み合わせ関数の紹介です:-
ref: 応答性の高いデータ参照を作成するために使用されます。参照された値は.value経由でアクセスおよび変更できます。 -
reactive: 応答性の高いオブジェクトを作成するために使用されます。リアクティブ更新は、オブジェクトのプロパティにアクセスして変更することによってトリガーできます。 -
computed: 計算されたプロパティを作成するために使用されます。値は、他の反応性データの変化に基づいて動的に計算できます。 -
watch: 応答データの変更を監視し、対応するコールバック関数を実行するために使用されます。
-
-
コンポーネントの論理編成: 構成 API を使用すると、オプションではなく機能に従ってコンポーネントのロジックを編成できます。関連するリアクティブ データ、計算されたプロパティ、メソッドなどをまとめて、コンポーネントのロジックをより明確にし、保守しやすくすることができます。
-
ライフ サイクル フック: Vue 3 では、ライフ サイクル フック関数は
onBeforeMount、onMounted、onBeforeUpdateに置き換えられました。 、onUpdated、onBeforeUnmount、onUnmountedなどの機能があります。これらの関数をsetup()関数内で使用して、対応するライフサイクル操作を実行できます。詳細については、vue3-CSDN ブログのライフ サイクル機能を参照してください。 -
カスタム組み合わせ関数: 組み込みの組み合わせ関数を使用することに加えて、組み合わせ関数をカスタマイズして、より複雑なロジックの再利用を実現することもできます。カスタム合成関数はパラメータを受け取り、リアクティブなデータとメソッドを含むオブジェクトを返すことができます。
構成 API を使用すると、コンポーネントのロジックがより明確になり、保守しやすく、テストしやすくなります。これにより、コンポーネント ロジックを整理して再利用するためのより柔軟な方法が提供され、コードがより読みやすく、拡張可能になります。コンポジション API を使用する場合は、Vue 3 公式ドキュメントのコンポジション API の詳細な概要とサンプル コードを参照してください。