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のデプロイと基本的な使い方の詳しい説明

推薦する

Linux でリモート MySQL データベースを手動で展開する方法の詳細な説明

1. mysql をインストールします。次のコマンドを実行して、YUM ソースを更新します。 rpm...

React Contextの理解と応用についてお話ししましょう

目次序文React Context の初見コンテキストの使い方コンテキストを直接取得できるいくつかの...

MySQLオンラインDDLの使用に関する詳細な説明

目次文章LOCKパラメータアルゴリズムパラメータCOPY TABLE プロセスIN-PLACEプロセ...

nginxワーカープロセスループの実装

ワーカープロセスは、起動されると、まず自身の動作に必要な環境を初期化し、次に実行する必要があるイベン...

ユーザーエクスペリエンスの76の経験ポイントの要約

ウェブサイト体験の分類1. 感覚体験:快適性を重視した視聴覚体験をユーザーに提供します。 2. イン...

複数の HTML ページで HTML コードをまとめて呼び出す方法

方法 1: スクリプト方式を使用する:共通ヘッダー ファイル head.js または共通フッター フ...

Apache SkyWalkingのセルフモニタリングを素早く有効にする方法を説明します

1. Prometheusテレメトリデータを有効にするデフォルトでは、テレメトリは次のように無効にな...

無効と読み取り専用で入力を読み取り専用に設定する

読み取り専用入力を実現するには、無効と読み取り専用の 2 つの方法があります。当然、どちらの結果も読...

JavaScriptエラーキャプチャの詳細な説明

目次1. 基本的な使い方とロジック2. 特徴3. エラーオブジェクト4. キャッチアンドスロー戦略の...

Linuxコマンドをバックグラウンドで実行する方法

通常、ターミナルでコマンドを実行する場合、別のコマンドの入力を開始する前に、現在のコマンドが終了する...

Linux で Spring Boot プロジェクトを開始および停止するためのスクリプトの例

Springboot プロジェクトを開始するには、次の 3 つの方法があります。 1. メインメソッ...

素晴らしい CSS ナビゲーション バーの下線効果

中国初のカッター github.com/chokcocoまず、ここに画像があります。純粋な CSS ...

Windows 64 ビット版 MySQL 5.7 以降の解凍パッケージにデータディレクトリと my-default.ini がなく、サービスが起動できない問題の簡単な解決方法 (問題概要)

私は SQL の初心者で、オープンソースのインストールは非常に簡単だと思っていましたが、その過程でい...

Dockerオーバーレイはホスト間のコンテナ相互通信を実現します

目次1. Dockerの設定2. レジストリとネットワークを作成する3. コンテナを起動する環境説明...

アダプティブ Web デザインの手法 (モバイル フォンでの優れたアクセス エクスペリエンス)

1. HTML ヘッダーにビューポート タグを追加します。ウェブサイトの HTML ファイルの先頭...