Vue3の一般的なAPIの使用方法の紹介

Vue3の一般的なAPIの使用方法の紹介

Vue3.x がリリースされてから長い時間が経ち、新しいパッケージングツール vite を含め、関連エコシステムが徐々に登場してきました。vue3.0 を学習する過程で、いくつかの実用的な API 比較があります。開発中のデモンストレーションを示し、対応する API を正確に使用してプロジェクト開発を完了したいと考えています。

ライフサイクルの変化

setup 関数は 2 つのライフサイクル関数 beforeCreate と created を置き換えるので、その実行時間は beforeCreate と create の間であると想定できることに注意してください。

ビュー2ビュー3
作成前設定
作成された設定
マウント前マウント前
マウントされたマウント時
更新前更新前
更新されました更新日
前ストーリーマウント解除前
破壊されたマウント解除時

Vue3 を学んだ友人は、setup 関数が使用されるようになったことを知っています。setup 関数でのデータの操作を説明するには、例を使用する方が良いでしょう。

反応的な

リアクティブ メソッドは、レスポンシブなデータ オブジェクトを作成するために使用されます。この API は、defineProperty を通じて Vue2 がデータの応答性を実装する際の問題も解決します。

使い方は非常に簡単で、データをパラメータとして渡すだけです。

<テンプレート>
 <div id="アプリ">
 <!-- 4. レスポンシブ データ オブジェクト内のアクセス数 -->
 {{ 状態.count }}
 </div>
</テンプレート>

<スクリプト>
// 1. vueからreactiveをインポートする 
'vue' から {reactive} をインポートします
エクスポートデフォルト{
 名前: 'アプリ'、
 設定() {
 // 2. レスポンシブなデータオブジェクトを作成する const state = reactive({count: 3})

 // 3. テンプレートで使用するためのレスポンシブデータオブジェクトの状態を返す return {state}
 }
}
</スクリプト>

参照

setup 関数を導入するときに、ref 関数を使用してレスポンシブなデータ オブジェクトをラップしました。表面的には、reactive と同じ機能があるように見えます。実際、ref は reactive を介してオブジェクトをラップし、その値をオブジェクトの value 属性に渡すため、似ています。これにより、アクセスするたびに .value を追加する必要がある理由も説明されます。

ref(obj) は reactive({value: obj}) と単純に理解できます。

<スクリプト>
'vue' から {ref, reactive} をインポートします。
エクスポートデフォルト{
 名前: 'アプリ'、
 設定() {
 定数オブジェクト = {数: 3}
 定数state1 = ref(obj)
 定数state2 = リアクティブ(obj)

 コンソールログ(状態1)
 コンソールログ(状態2)
 }
 
}
</スクリプト> 

注: ここでの .value は、setup 関数で ref によってラップされたオブジェクトにアクセスする場合にのみ必要です。コンパイル時に ref によってラップされているかどうかが自動的に識別されるため、テンプレート テンプレートでアクセスする場合は必要ありません。

では、ref と reactive をどのように選択すればよいのでしょうか?
提案:

  1. プリミティブ値(文字列、数値、ブール値など)または単一値オブジェクト(プロパティ値が 1 つしかない {count: 3} など)には ref を使用します。
  2. 参照型の値(オブジェクト、配列)はリアクティブを使用する

vue2.x では ref を使用して要素タグを取得します。vue3.x で要素タグを取得したい場合はどうすればよいでしょうか?

<テンプレート>
 <div>
 <div ref="el">div 要素</div>
 </div>
</テンプレート>

<スクリプト>
'vue' から { ref, onMounted } をインポートします
エクスポートデフォルト{
 設定() {
 // DOM 参照を作成します。名前は要素の ref 属性名と同じである必要があります。const el = ref(null)

 // ターゲット要素はマウント後にのみelを通じて取得できます onMounted(() => {
  el.value.innerHTML = 'コンテンツが変更されました'
 })

 // 作成された参照を返す return {el}
 }
}
</スクリプト>

要素を取得する操作は、次の手順に分かれています。

  1. まず、ターゲット要素のref属性に値を設定します。elであると仮定します。
  2. 次に、setup 関数で ref 関数を null 値で呼び出し、それを変数 el に割り当てます。変数名は、要素に設定した ref 属性名と同じである必要があることに注意してください。
  3. 参照変数elを要素に返す

補足: 設定された要素参照変数はコンポーネントがマウントされた後にのみアクセスできるため、マウント前の要素に対する操作は無効です。もちろん、コンポーネント要素を参照すると、コンポーネントのインスタンス オブジェクトが取得されます。

参照

toRef は、オブジェクト内の値をレスポンシブ データに変換します。2 つのパラメータを受け取ります。最初のパラメータは obj オブジェクトで、2 番目のパラメータはオブジェクト内のプロパティ名です。

<スクリプト>
// 1. toRefをインポートする
'vue' から { toRef } をインポートします
エクスポートデフォルト{
 設定() {
  定数オブジェクト = {数: 3}
  // 2. obj オブジェクトの属性 count の値をレスポンシブ データに変換します。const state = toRef(obj, 'count')
 
  // 3. テンプレートで使用するために toRef でラップされたデータ オブジェクトを返します。 return {state}
 }
}
</スクリプト>

上に ref と toRef がありますが、競合しませんか?これら 2 つの効果は異なります。

<テンプレート>
 <p>{{ 状態1 }}</p>
 <button @click="add1">追加</button>

 <p>{{ 状態2 }}</p>
 <button @click="add2">追加</button>
</テンプレート>

<スクリプト>
'vue' から {ref, toRef} をインポートします。
エクスポートデフォルト{
 設定() {
  定数オブジェクト = {数: 3}
  定数state1 = ref(obj.count)
  定数state2 = toRef(obj, 'count')

  関数add1() {
   状態1.値++
   console.log('元の値:', obj);
   console.log('レスポンシブデータオブジェクト:', state1);
  }

  関数add2() {
   状態2.値++
   console.log('元の値:', obj);
   console.log('レスポンシブデータオブジェクト:', state2);
  }

  {state1、state2、add1、add2} を返します。
 }
}
</スクリプト>

ref は元のデータのコピーであり、元の値には影響しません。同時に、レスポンシブ データ オブジェクトの値が変更されると、ビューも同期的に更新されます。
toRef は元のデータへの参照であり、元の値に影響しますが、レスポンシブ データ オブジェクトの値が変更された後にビューは更新されますか?

参照

渡されたオブジェクト内のすべての属性の値をレスポンシブなデータ オブジェクトに変換します。この関数は、1 つのパラメータ、obj オブジェクトをサポートします。

<スクリプト>
// 1. toRefs をインポートする
'vue' から { toRefs } をインポートします
エクスポートデフォルト{
 設定() {
  定数オブジェクト = {
   名前: 「フロントエンドインプレッション」
   年齢: 22歳
   性別: 0
  }
  // 2. objオブジェクトの属性countの値をレスポンシブデータに変換します。const state = toRefs(obj)
 
  // 3. console.log(state) を印刷して確認する
 }
}
</スクリプト>

返されるのは、パッケージ化された各レスポンシブデータオブジェクトを含むオブジェクトです。

浅い反応性

この API の名前が示すように、これは浅いリアクティブ API です。元のリアクティブ API が深いということでしょうか? はい、これはパフォーマンス最適化のための API です。

<スクリプト>
<テンプレート>
 <p>{{state.a} } </p>
 <p>{{ state.first.b }}</p>
 <p>{{ state.first.second.c }}</p>
 <button @click="change1">変更 1</button>
 <button @click="change2">変更 2</button>
</テンプレート>
<スクリプト>
'vue' から { shallowReactive } をインポートします。
エクスポートデフォルト{
 設定() {
  定数オブジェクト = {
   a: 1、
   初め: {
   b: 2,
   2番目: {
    3: 3 です
   }
   }
  }
  
  const 状態 = shallowReactive(obj)
 
  関数change1() {
   状態.a = 7
  }

  関数change2() {
   状態.first.b = 8
   状態.第一.第二.c = 9
   コンソールログ(状態);
  }

  {状態} を返す
 }
}
</スクリプト>

まず、2番目のボタンをクリックして、2番目のレイヤーのbと3番目のレイヤーのcを変更しました。値は変更されましたが、ビューは更新されませんでした。

最初のボタンをクリックして最初のレイヤーの a を変更すると、ビュー全体が更新されます。

これは、shallowReactive が最初の層の属性の値を監視し、変更されるとビューを更新することを示しています。

浅い参照

これは、shallowReactive のようなパフォーマンス最適化のために使用される浅い参照です。triggerRef で呼び出されると、ビューはすぐに更新できます。更新する必要がある参照オブジェクトであるパラメーター state を受け取ります。

shallowReactive は、オブジェクトの最初のレイヤーのデータの変更を監視してビューの更新を駆動し、shallowRef は .value の変更を監視してビューを更新します。

<テンプレート>
 <p>{{state.a} } </p>
 <p>{{ state.first.b }}</p>
 <p>{{ state.first.second.c }}</p>
 <button @click="change">変更</button>
</テンプレート>

<スクリプト>
'vue' から {shallowRef, triggerRef} をインポートします。
エクスポートデフォルト{
 設定() {
  定数オブジェクト = {
   a: 1、
   初め: {
   b: 2,
   2番目: {
    3: 3 です
   }
   }
  }
  
  定数状態 = shallowRef(obj)
  コンソールにログ出力します。

  関数変更() {
   状態.値.最初.b = 8
   状態.値.最初.2番目.c = 9
   // 値を変更したら、ビューを駆動してtriggerRef(state)をすぐに更新します
   console.log(状態);
  }

  {状態、変更} を返す
 }
}
</スクリプト>

生の

toRaw メソッドは、ref または reactive オブジェクトの生データを取得するために使用されます。

<スクリプト>
'vue' から {reactive, toRaw} をインポートします。
エクスポートデフォルト{
 設定() {
  定数オブジェクト = {
   名前: 「フロントエンドインプレッション」
   年齢: 22
  }

  定数状態 = リアクティブ(obj) 
  定数raw = toRaw(状態)

  console.log(obj === raw) // 真
 }
}
</スクリプト>

上記のコードは、toRaw メソッドがリアクティブ オブジェクトから元のデータを取得することを証明しているため、ビューを更新せずに元のデータの値を変更することで、パフォーマンスの最適化を簡単に行うことができます。

注: さらに、toRawメソッドで受け取ったパラメータがrefオブジェクトの場合、元のデータオブジェクトを取得するには.valueを追加する必要があります。

マークRaw

markRaw メソッドは、元のデータを非応答としてマークできます。ref または reactive でラップされていても、データの応答性は実現できません。このメソッドは、元のデータを 1 つのパラメータとして受け取り、マークされたデータを返します。値を変更してもビューは更新されない、つまりデータの応答性が実装されていない

<テンプレート>
 <p>{{ 状態名 }}</p>
 <p>{{ 状態.年齢 }}</p>
 <button @click="change">変更</button>
</テンプレート>

<スクリプト>
'vue' から {reactive, markRaw} をインポートします。
エクスポートデフォルト{
 設定() {
  定数オブジェクト = {
   名前: 「フロントエンドインプレッション」
   年齢: 22
  }
  // 元のデータ obj を markRaw でマークして、データの更新が追跡されないようにする const raw = markRaw(obj) 
  // レスポンシブデータにするために、raw を reactive でラップします。const state = reactive(raw) 

  関数変更() {
   状態.年齢 = 90
   コンソールにログ出力します。
  }

  {状態、変更} を返す
 }
}
</スクリプト>

ウォッチエフェクト

watchEffect と watch の主な違いは次のとおりです。

  1. 依存関係を手動で渡す必要はありません
  2. 初期化のたびにコールバック関数が実行され、依存関係が自動的に取得されます。
  3. 元の値は取得できず、変更された値のみ取得できます
<スクリプト>
'vue' から {reactive, watchEffect} をインポートします。
エクスポートデフォルト{
 設定() { 
   const 状態 = リアクティブ({ カウント: 0、名前: 'zs' })

   ウォッチエフェクト(() => {
   コンソールログ(状態数)
   console.log(状態名)
   /* 初期化中に印刷:
     0
     ず

   1 秒後に次のように出力されます:
     1
     ls
   */
   })

   タイムアウトを設定する(() => {
   状態.count++
   状態名 = 'ls'
   }, 1000)
 }
}
</スクリプト>

依存関係をウォッチ メソッドに渡す代わりに、コールバック関数が直接指定されます。

コンポーネントが初期化されると、コールバック関数が1回実行され、検出する必要があるデータ(state.countとstate.name)が自動的に取得されます。

上記の特性に基づいて、どのリスナーを使用するかを選択できます。

現在のインスタンスを取得する

Vue2 のどのコンポーネントでも、現在のコンポーネントのインスタンスを取得したい場合は、これを使用して取得できることは誰もが知っています。Vue3 では、多くのコードが setup 関数で実行され、この関数では、 this は undefined を指します。では、現在のコンポーネントのインスタンスを取得するにはどうすればよいでしょうか。この時点では、別のメソッド、つまりgetCurrentInstanceを使用することができます。

<テンプレート>
 <p>{{ 数値 }}</p>
</テンプレート>
<スクリプト>
'vue' から {ref, getCurrentInstance} をインポートします。
エクスポートデフォルト{
 設定() { 
  定数num = ref(3)
  定数インスタンス = getCurrentInstance()
  console.log(インスタンス)

  {num} を返す
 }
}
</スクリプト>

たとえば、必要なのは ctx プロパティと proxy プロパティです。 ctxとproxyの内容は非常に似ていることがわかりますが、後者は前者の外側にproxyのレイヤーでラップされており、proxyが応答性があることを示しています。

使用ストア

Vue2 で Vuex を使用する場合、this.$store を通じて Vuex インスタンスを取得しますが、前の部分で Vue2 で this を取得する方法が異なると説明しましたが、Vue3 の getCurrentInstance().ctx には $store 属性が見つかりませんでした。では、どのようにして Vuex インスタンスを取得するのでしょうか。これにはvuexのuseStoreメソッドが必要です。

// ストアフォルダ内のindex.js
'vuex' から Vuex をインポートします

const ストア = Vuex.createStore({
 州: {
  名前: 「フロントエンドインプレッション」
  年齢: 22
 },
 突然変異:
  …
 },
 …
})

// 例.vue
<スクリプト>
// vuex から useStore メソッドをインポートします。import {useStore} from 'vuex'
エクスポートデフォルト{
 設定() { 
  // vuexインスタンスを取得する const store = useStore()

  コンソール.log(ストア)
 }
}
</スクリプト>

その後は通常どおり vuex を使用できます。

以上がvue3のよく使われるAPIの使い方の紹介の詳しい内容です。vueのよく使われるAPIの使い方についてもっと知りたい方は、123WORDPRESS.COMの関連記事もぜひご覧ください!

以下もご興味があるかもしれません:
  • WebStormはVue3統合APIのソリューションを正しく識別できません
  • vue3.0のComposition APIの使い方の1つを詳しく説明します
  • Vue3.0のComposition APIの使用例
  • Vue3 の新機能: Composition API での CSS モジュールの使用
  • 「Vue3.0 Function API」の詳細な読み物
  • Vue3.0 API の新バージョンのコンポジション API の簡単な紹介
  • Vue3 Composition API の抽出と再利用ロジックの詳細な説明
  • Vue3 Composition API が Vue Mixins に取って代わる仕組みについて簡単に説明します。

<<:  MySQLのパスワードを忘れた場合の対処方法

>>:  Docker Composeのデプロイと基本的な使い方の詳しい説明

推薦する

MySQLクエリ文を書き換える3つの戦略

目次複雑なクエリとステップバイステップのクエリクエリステートメントを分割する共同クエリの分解問題のあ...

ウェブ理論: 考えさせない読書ノート

第 1 章<br /> Web ページをユーザーにとって使いやすいものにするための最も重...

MySQL MyISAM と InnoDB の違い

違い: 1. InnoDB はトランザクションをサポートしていますが、MyISAM はサポートしてい...

MySQL8の再帰メソッドの使い方を教える

以前、カスタム関数を使用して MySQL でツリー構造を再帰的にクエリする方法についての記事を書きま...

はじめに: HTML の基本的なタグと属性の簡単な紹介

HTML はタグと属性で構成されており、これらを組み合わせてブラウザにページの表示方法を指示します。...

Mysqlはブール型の演算を設定します

Mysqlはブール型を設定します1. Tinyintタイプテストテーブルを作成し、blフィールドをブ...

モバイルデバイスで 1 ピクセルの境界線の問題を解決するいくつかの方法 (5 つの方法)

この記事では、モバイルデバイス上の 1 ピクセルの境界線の問題を解決する 5 つの方法を紹介します。...

ウェブページ作成に役立つコード

<br />ホームページの右側にあるスクロールバーを削除するにはどうすればよいですか? ...

Linux デバイスに空き容量がありません inode の満杯により 500 エラーが発生します

iノードとは何ですか? inode を理解するには、まずファイル ストレージから始める必要があります...

1 つの記事で v-model とその修飾子を学ぶ

目次序文v-model の修飾子:怠け者トリム番号さまざまな入力タイプやその他の要素での v-mod...

Vue コンポーネント化の一般的な方法: コンポーネント値の転送と通信

関連する知識ポイント親コンポーネントから子コンポーネントに値を渡す子コンポーネントから親コンポーネン...

フラッシュコンテンツの表示に使用される OBJECT タグと EMBED タグの違いの紹介

1. はじめに:ウェブページにフラッシュ コンテンツを正常に表示したい場合は、ページ上のフラッシュ ...

Nginx ロケーション設定のチュートリアル (ゼロから)

基礎位置の一致順序は、「最初に正規表現に一致し、次に共通表現に一致」です。実際のロケーションの一致順...

JavaScriptイベント実行メカニズムの深い理解

目次序文ブラウザJS非同期実行の原理ブラウザのイベントループ実行スタックとタスクキューマクロタスクと...

CentOS 7 で RPM パッケージを使用して MySQL 5.7.9 をインストールするチュートリアル

MySQL 5.7.9 のインストールチュートリアルを録画してみんなと共有しましょう環境の紹介:オペ...