Vue3 setup() の高度な使用例の詳細な説明

vue2 から vue3 にアップグレードすると、vue3 は vue2 と互換性があるため、vue3 は vue2 のオプション API を採用できます。オプション API の変数は複数の場所に存在するため、問題が発生した場合には複数の関数で確認する必要があります。プロジェクトが大きい場合、問題が発生するとトラブルシューティングの難易度が高くなります。そのため、vue3 では、結合された API を記述するために使用される新しいセットアップ構成項目が追加されました。

1. オプションAPIと組み合わせAPIの違い

学生の中には、気づかないうちに 1 年間 Vue を使っていたにもかかわらず、オプションの API すら知らない人もいます。あなたはあのクラスメイトですか？もしそうなら、すぐに集めてください。

vue2 のオプション API はオプションの API で、中国語と英語の 2 種類があり、好きな名前を付けることができます。

vue ファイルには、ページロジックを一緒に処理するためのプロパティとメソッドを定義するために使用されるデータ、メソッド、マウント、計算、ウォッチなどがあります。このメソッドを Options API と呼びます。

例1: カウンター

<テンプレート>
 <div>
  <button @click="add">+</button>
   {{数値}}
  <button @click="reduce">-</button>
 </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
 データ（）{
  戻る {
   番号:0
  }
 },
 方法:{
  追加（）{
   this.num++
  },
  減らす（）{
   this.num--
  }
 }
}
</スクリプト>

上記の例を見ると、数値の処理にはデータとメソッドの 2 つのオプションが含まれていることがわかります。ビジネス処理は比較的分散しています。プロジェクトが小さい場合は明確に見えますが、プロジェクトが大きくなると、データとメソッドには多くの属性とメソッドが含まれます。このとき、どの属性がどのメソッドに対応しているかを区別するのは困難です。そのため、vue3 では、結合された API を記述するための新しいセットアップが追加されています。

Vue3 の Composition API は組み合わせ API です。

結合 API とは、関数で定義されているすべての API をまとめたものです。これにより、プロジェクトが大きくなり、機能が増えても、その機能に関連するすべての API をすぐに見つけることができます。Options API とは異なり、機能が分散しているため、変更が必要な場合、複数の場所での検索プロセスが困難です。

例2: カウンター

<テンプレート>
 <div>
  <button @click="add">+</button>
   {{数値}}
  <button @click="reduce">-</button>
 </div>
</テンプレート>
<スクリプト>
 'vue' から { ref } をインポートします
 エクスポートデフォルト{
  設定（）{
   定数num = ref(1)
   戻る {
    番号、
    追加（）{
     数値++
    },
    減らす（）{
     数値--
   }
  }
 }
}
</スクリプト>

Ref は基本的なデータ型をレスポンシブにします。次の記事ではその使い方を詳しく紹介します。必要な場合は、これに従ってください。迷うことはありません!

それらの違いを説明する写真がこちらです:

2. セットアップの使い方は？

2.1. セットアップはいつ実行されますか?

setup は、結合された API を記述するために使用されます。ライフサイクルフック関数の観点からは、beforeCreate を置き換えることと同等です。作成される前に実行されます。

<スクリプト>
 エクスポートデフォルト{
  作成された(){
   console.log('作成されました');
  },
  設定（）{
   console.log('セットアップ');
  }
 }
</スクリプト>

実行後、セットアップ印刷結果が常に先頭に表示されます。

2.2. セットアップデータとメソッドの使用方法

例3: 変数を直接定義して使用する

<テンプレート>
 {{a}}
</テンプレート>
<スクリプト>
 エクスポートデフォルト{
  設定（）{
   定数a = 0
  }
 }
</スクリプト>

実行後、結果は異常です:

runtime-core.esm-bundler.js?5c40:6584 [Vue 警告]: レンダリング中にプロパティ "a" にアクセスされましたが、インスタンスでは定義されていません。

アクセスした属性 a がインスタンスにマウントされていないというメッセージが表示されます。

セットアップ内のプロパティとメソッドは、プロパティをインスタンスにマウントできるように return によって公開される必要があります。そうしないと、プロパティは使用できません。上記のコードでは return が追加されています。

<スクリプト>
 エクスポートデフォルト{
  設定（）{
   定数a = 0
   戻る {
    1つの
   }
  }
 }
</スクリプト>

2.3. 内部設定はありますか?

これをセットアップで印刷すると、結果は未定義になります。これはセットアップ内に存在しないことを意味し、これに関連するものはマウントできません。

2.4. セットアップでフック関数を使用するにはどうすればいいですか?

Vue3 は Vue2 のオプションベースの記述スタイルと互換性があるため、フック関数はセットアップと並行して存在することができ、これは Options API と同等です。

例4:

エクスポートデフォルト{
 設定（）{
  console.log('セットアップ');
 },
 マウントされた(){
  console.log('マウントされました');
 }
}

vue3 で追加された setup() 関数は、結合された API を記述するために使用されるため、この方法でコードを記述することは推奨されません。したがって、フック関数を登録するには、onXXX ファミリの関数を使用する必要があります。登録が成功すると、呼び出されたときにコールバック関数が渡されます。

例5:

"vue" から onMounted をインポートします。
エクスポートデフォルト{
 設定（）{
  定数a = 0
  戻る {
   1つの
  },
  マウント時(()=>{
   console.log("実行");
 })
 }
}

これらの登録されたライフサイクルフック関数は、現在のコンポーネントインスタンスを見つけるためにグローバルな内部状態に依存しているため、セットアップ中に同期的にのみ使用できます。また、関数が現在のコンポーネントで呼び出されない場合はエラーがスローされます。

他のフック関数は同じなので、必要に応じて導入してください。

2.5. セットアップ関数とフック関数の関係

セットアップがフック関数と並行してリストされている場合、セットアップはライフサイクル関連の関数を呼び出すことはできませんが、ライフサイクルはセットアップ関連のプロパティとメソッドを呼び出すことができます。

例6:

<テンプレート>
 <button @click="log">クリックしてください</button>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
 設定（）{
  定数a = 0
  戻る {
   1つの
  }
 },
 方法:{
  ログ（）{
   console.log( this.$options.setup() ); // オブジェクトを返します }
 }
}
</スクリプト>

this.$options.setup() は、セットアップ内のすべてのプロパティとメソッドを含む大きなオブジェクトを返します。

3. 設定パラメータ

セットアップを使用すると、props と context という 2 つのパラメータを受け取ります。

3.1. 小道具

最初のパラメータは props です。これは、親コンポーネントが子コンポーネントに値を渡すことを意味します。props はレスポンシブであり、新しい props が渡されると自動的に更新されます。

例7:

エクスポートデフォルト{
 小道具: {
  メッセージ: 文字列、
  回答: 文字列、
 },
 セットアップ(プロパティ、コンテキスト){
  console.log(props); //Proxy {msg: "緊急にパートナーを探しています", ans: "パートナーはいますか?"}
 },
}

props はレスポンシブなので、ES6 のデストラクチャリングは使用できず、props のレスポンシブ性が失われます。この場合、toRefs のデストラクチャリングが必要です。例8:

「vue」から {toRefs} をインポートします。
 エクスポートデフォルト{
  小道具: {
   メッセージ: 文字列、
   回答: 文字列、
  },
  セットアップ(プロパティ、コンテキスト){
   コンソールにログ出力します。
   const { msg, ans } = toRefs(props)
   console.log(msg.value); // パートナーを心待ちにしています console.log(ans.value); // パートナーはいますか?
  },
 }

コンポーネントを使用する際、オプションのパラメータに遭遇することがよくあります。値を渡す必要がある場合もあれば、そうでない場合もあります。どのように対処しますか?

ans がオプションのパラメータである場合、渡されたプロパティに ans が存在しない可能性があります。この場合、toRefs は ans の参照を作成しないので、代わりに toRef を使用する必要があります。

「vue」から {toRef} をインポートします。
セットアップ(プロパティ、コンテキスト){
 let ans = toRef(props ,'ans') // 存在しない場合はansを作成する
 console.log(ans.値);
}

3.2、コンテキスト

コンテキストコンテキスト環境には、属性、スロット、カスタムイベントの 3 つの部分が含まれます。

セットアップ(プロパティ、コンテキスト){
 const { attrs, slots, emitting } = コンテキスト
 // attrsはコンポーネントから渡された属性値を取得します。
 // スロット コンポーネント内のスロット // カスタム イベント サブコンポーネントを発行します}

attrs は、主に no-props 属性を受け取り、いくつかのスタイル属性を渡すためによく使用される非応答オブジェクトです。

slots はプロキシオブジェクトであり、slots.default() は、コンポーネントのスロットによって長さが決定され、スロットの内容が含まれる配列を取得します。

これはセットアップには存在しないため、emit は以前の this.$emit を置き換えるために使用され、子から親に渡されるときにカスタムイベントをトリガーするために使用されます。

例9:

<テンプレート>
 <div:style="attrs.style"> は、
  <スロット></スロット>  
  <スロット名="hh"></スロット>
  <button @click="emit('getVal','Pass value')">子が親に値を渡す</button> 
 </div> 
</テンプレート>
<スクリプト>
「vue」から { toRefs,toRef } をインポートします。
エクスポートデフォルト{
 セットアップ(プロパティ、コンテキスト){
  const { attrs, slots, emitting } = コンテキスト
  // attrs はコンポーネントから渡されたスタイル属性を取得します console.log('slots', slots.default()); // スロット配列 console.log('slot attribute', slots.default()[1].props); // スロットの属性を取得します return {
  属性、
  放出する
   }
  },
 }
</スクリプト>

4. セットアップ機能の概要

1. この関数は、上で説明したように、作成前に実行されます。

2. 内部にこの設定がないので、これに関連するものは搭載できません。

3. セットアップ内のプロパティとメソッドは返され公開される必要があります。そうでない場合、使用できません。

4. セットアップ内のデータが応答しません。

5. セットアップはライフサイクル関連の関数を呼び出すことはできませんが、ライフサイクル関数はセットアップ内の関数を呼び出すことができます。

vue3 setup() の高度な使い方に関するこの記事はこれで終わりです。より関連性の高い vue3 setup() の使い方コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: