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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue3 アップデートのセットアップ構文シュガー例の詳細な説明
  • Vue3 - セットアップスクリプトの使用経験の共有
  • フロントエンド vue3 セットアップチュートリアル
  • vue3 でのセットアップ スクリプトの適用例
  • Vue3 ベースのスクリプト設定構文 $refs の使用
  • 強くお勧めします! Vue 3.2 でシンタックスシュガーを設定する
  • setup+ref+reactive は vue3 の応答性を実装します
  • vue3のセットアップ関数の使用について

<<:  リモートDockerを使用した統合テスト環境の構築手順

>>:  CSS でハニカム/六角形アトラスを実装するためのサンプルコード

推薦する

Docker イメージ管理の一般的な操作コード例

ミラーリングも Docker のコアコンポーネントの 1 つです。ミラーリングはコンテナ操作の基盤で...

Docker MQTT のインストールと使用のチュートリアル

MQTT の紹介MQTT (Message Queuing Telemetry Transport)...

Mysql5.7でのスケジュールバックアップの実装

1. MySQL インストール パス D:\xxx\MYSQL\MySQL Workbench CE...

階段を転がす特殊効果を実現する JavaScript (jQuery 実装)

皆さんもJDを使ったことがあると思います。ホームページには非常によく見られる機能があります。階段の特...

CSS の border 属性と display 属性の使い方の簡単な分析

境界プロパティの概要borderプロパティは要素の境界を設定します。境界線の3要素は、太さ、線の種類...

MySQL でのトランザクションの使用方法

基礎トランザクションは、SQL ステートメントのグループに対するアトミック操作です。つまり、グループ...

ウェブサイトを高速化する

パフォーマンスは本当に重要ですか?パフォーマンスは重要であり、誰もがそれを知っています。なぜ私たちは...

色の16進数カラーコード表表示と16進値の比較表示で簡単に検索できます

さまざまな色の16進コード表[パート1] 赤とピンク、およびそれらの 16 進コード。 #99003...

Linux DHCPサービスの詳細な説明

目次1. DHCP サービス (動的ホスト構成プロトコル) 1. 背景2. 概要3. 利点4.DHC...

HTML メタタグの一般的な使用例のコレクション

マタタグとは<meta> 要素は、検索エンジン向けの説明やキーワード、更新頻度など、ペー...

Docker 自動ビルド 自動ビルド実装プロセス図

自動ビルドとは、Docker Hub を使用して、Dockerfile ファイルを含む GitHub...

VMware15 の Deepin インストール詳細チュートリアル (画像とテキスト)

序文Deepin のユーザー インターフェイスは、使用時に非常に見栄えがします。インターフェイス効果...

子コンポーネントで vue activated を使用する詳細

ページ: ベース: <テンプレート> <div class="タブコンテ...

ES6 における Object.assign() の使い方の詳細な説明

目次2. 目的2.1 オブジェクトにプロパティを追加する2.3 オブジェクトの複製2.4 複数のオブ...

CSS3ダイヤモンドパズルはdivのみを回転し、背景画像は回転しない機能を実現します

需要背景プロジェクトはVueを使用して作成され、ビジネス要件にはパズル効果があります。デフォルトの背...