setup() は Vue3 の新しい設定項目で、結合 API とも呼ばれ、コンポーネントで使用されるデータ メソッドはセットアップで設定する必要があり、戻り値は 2 つあります。
1. オブジェクトが返されると、オブジェクト内のプロパティとメソッドをテンプレートで直接使用できます。
2. レンダリング関数 h を返すことができ、レンダリングされたコンテンツを直接カスタマイズできます (簡単に理解できます)
3. セットアップの 2 つのパラメータ
1. 小道具。通常、親から子にデータを渡すために使用されます。
props は渡したデータを含むオブジェクトです
2. context、コンテキストオブジェクトには、コンポーネントのいくつかのデータ処理メソッドが含まれています
これらはスロットが発行する属性であり、より重要な 3 つです。これら 3 つの機能を以下に紹介します。
attrs は v2 の this.attrs と同等で、その値はオブジェクトであり、props によって受信されない限り、props によって受信されます。
スロットは受信したスロットのコンテンツを指します。v2 の this.$slots に相当します。
Emit は通常、息子から父へ使用されます。これは v2 のものと同等です。this.$emit
import Son はより現実的なシミュレーションのためのものであり、あまり意味がありません
前回のブログでは、非同期関数に関しては、その戻り値は Promise オブジェクトであり、戻り値はもはや戻り値オブジェクトではないため、セットアップでは非同期関数にすることはできません。
また、setup は beforecreate より前に実行されるため、setup には this はありません。このため、beforecreate と created の 2 つのライフサイクル関数が setup に統合されているため、vue3 にはこれら 2 つのライフサイクルは存在しません。
