Vue3 における ref と reactive の詳細な説明と拡張

Vue3 における ref と reactive の詳細な説明と拡張

1. 参照と反応

覚えておいてください: ref も本質的に反応的であり、ref(obj) は reactive({value: obj}) と同等です。

  • Vue3 でレスポンシブなデータを実装する方法は、ref と reactive を使用することです。いわゆるレスポンシブとは、インターフェースとデータが同期され、リアルタイムで更新できることを意味します。
  • vue2では、応答性はdefinePropertyによって実現されますが、vue3ではES6 Proxyによって実現されます。

1. 反応的

  • リアクティブ パラメータは、JSON データと配列を含むオブジェクトである必要があります。そうでない場合は、応答しません。
  • 他のオブジェクト(timeオブジェクトなど)をreactiveに渡すと、変更されたオブジェクトのインターフェースはデフォルトでは自動的に更新されません。更新したい場合は、オブジェクトを再割り当てすることで解決できます。

2.参照

リアクティブがあるのに、なぜ ref が必要なのでしょうか?変数をレスポンシブにしたいだけの場合、リアクティブを使うのは面倒です。そのため、vue3 では単純な値を監視するための ref メソッドを提供しています。ただし、ref で渡せるのは単純な値だけというわけではありません。その基礎レイヤーはリアクティブであるため、リアクティブが持つすべての機能を備えています。それは昔から言われていることです。

覚えておいてください: ref も本質的に反応的であり、ref(obj) は reactive({value: obj}) と同等です。

  • .value を経由せずに、vue で ref の値を使用する
  • jsでrefの値を使用するには、.valueを介して取得する必要があります。

2. shallowRef と shallowReactive

再帰的および非再帰的監視
ref と reactive はどちらも再帰監視に属し、つまり、データの各レイヤーが応答します。データ量が多い場合は、パフォーマンスが大幅に消費されます。非再帰監視では、最初のレイヤーのデータのみが監視されます。

1. ref と shallowRef

  • refで定義されるデータの各レイヤーはレスポンシブデータである
  • shallowRefで定義されたデータの場合、最初のレイヤーのみが応答性を持ちます。つまり、応答性は.valueが変更された場合にのみ実現されます。
age = ref({
      a: '1'、
      f: {
        b: '2'、
        s:{
          c: '3'
        }
      }
    })
//各レイヤーのデータを出力します console.log(age);
console.log(年齢値);
console.log(年齢.値.f);
console.log(年齢.値.fs);

age = shallowRef({
      a: '1'、
      f: {
        b: '2'、
        s:{
          c: '3'
        }
      }
    })
//各レイヤーのデータを出力します console.log(age);
console.log(年齢値);
console.log(年齢.値.f);
console.log(年齢.値.fs);

shallowRefを使用した後、triggerRef()メソッドを介してインターフェースをアクティブに更新し、インターフェースの更新を実現できます。

関数doSome(){
  年齢.値.fsc = 'c';
  //インターフェイスをアクティブに更新しますtriggerRef(age);
}

2. 反応的で浅薄反応的

注意: shallowReactiveにはtriggerRef()と同様のメソッドはありません。

3. トゥロー

toRaw はどのような問題を解決しますか?

場合によっては、データをリアルタイムでレスポンシブに更新したくないことがあります。toRaw を使用すると、ref または reactive によって参照される元のデータを取得できます。元のデータを変更しても、インターフェイスは更新されません。インターフェイスへのレスポンシブな変更は、ref と reactive によってラップされたデータを変更する場合にのみ発生します。

obj1 = {...} とします。
//state と obj1 が参照されます。state の本質は Proxy オブジェクトであり、obj1 を参照します。
状態をreactive(obj1)とします。
//toRaw メソッドで元のデータを取得すると、実際には obj1 のメモリ アドレスが取得されます。obj2 と obj1 は完全に等しくなります。let obj2 = toRaw(state)
console.log(obj1 === obj2); //true

学生の中には、データを変更するには obj1 を使用するだけで十分ではないのかと尋ねる人もいるかもしれません。しかし重要なのは、reactive を使用してデータを定義する場合、通常は最初に obj を定義してからそれを reactive に渡すのではなく、reactive で直接データを書き込みます。

4. マークRaw

toRaw とは異なり、markRaw によってラップされたデータは追跡されません。

まだ使い道が見つかっていない(手動の犬の頭)

obj1 = {名前: "lijing", 年齢: 18}とします
obj2 = markRaw(obj1); とします。
//この時点では、reactive でラップされたデータはレスポンシブなオブジェクトですが、追跡されず、効果も発生しません。let state1 = reactive(obj2)

console.log(obj1 === obj2); //true

5. toRef と toRefs

ref と toRef はどちらもレスポンシブ データを構築するために使用されます。この 2 つの違いは何でしょうか? 2 つの例を見てみましょう。

1. 参照

レスポンシブデータをコピーして変更しても以前のデータには影響せず、データが変更されるとインターフェースは自動的に更新されます。

変換された型はRefImplです

ref を使用してオブジェクトの単純なデータ型属性をレスポンシブに変換した後、レスポンシブ データを変更しても元のデータには影響がないことがわかります。上の図に示すように、state1 によって値が変更された後、obj1 の a 属性の値は変更されません。ここで注意すべき点があります。変更された属性は単純なデータ型、特定の値である必要があり、参照であってはなりません。属性もオブジェクトである場合は、object-->reference! であるため影響を受けます。

例えば、上記の例で、obj1.f が state1 に渡された場合、状況はまったく異なります。

//let state1 = ref({b: '2',s: {c: '3'}}) と同等
// 以下も同様です --->let state1 = reactive({value: {....}}})
state1 = ref(obj1.f); とします。

2. 参照

toRef を使用して変換する場合、レスポンシブ データを変更すると元のデータに影響します。データは変更されますが、インターフェイスは自動的に更新されません。

変換された型はObjectRefImplです

refはディープコピーに似ており、torefはシャローコピーに似ています。

3. 参照

オブジェクト内のすべてのプロパティを反復処理し、レスポンシブ データに変換します。これは、toRef が 1 つのキーしか渡すことができないためです。toRefs によって達成される効果は toRef と同じです。

ヒント: 現在、最もよく使用されているのは ref と reactive であり、他のものは一般的に後でパフォーマンスを向上させるために使用されます。

要約する

これで、Vue3 の ref と reactive に関するこの記事は終了です。Vue3 の ref と reactive に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue3 の setUp とリアクティブ関数の使用方法の詳細な説明
  • Vue3 の組み合わせ API における setup、ref、reactive の完全な使用方法
  • Vue3 のリアクティブリセットの問題と解決策

<<:  MySQL データベースの詳細な説明 - 複数テーブル クエリ - 内部結合、外部結合、サブクエリ、相関サブクエリ

>>:  CentOS7 で yum ソースをインストールし、コマンド rz と sz をアップロードおよびダウンロードする方法 (画像付き)

推薦する

MySQL双方向バックアップの実装方法

MySQL 双方向バックアップはマスター-マスター バックアップとも呼ばれ、両方の MySQL サー...

jQuery で呼吸カルーセル効果を実現

この記事では、呼吸カルーセル効果を実現するためのjQueryの具体的なコードを参考までに共有します。...

SQLデータベースの14の事例の紹介

データシート /* Navicat SQLite データ転送 ソースサーバー: school ソース...

Vue コンポーネントの切り替え、動的コ​​ンポーネント、コンポーネントのキャッシュについて

目次1. コンポーネント切り替え方式方法1: v-ifとv-elseを使用する方法 2: 組み込みコ...

CSS3 画像の境界線を学ぶのに役立つ記事

CSS3 border-image プロパティを使用すると、要素の周囲に画像の境界線を設定できます。...

MySQL 8.0.15 のインストールと設定のグラフィックチュートリアルと Linux でのパスワード変更

このブログは、MySQL8.0.15 を正常にインストールしたことを思い出すために書きました。以前は...

MySQL の遅いクエリの最適化方法と最適化の原則

1. 日付のサイズを比較するには、XML に渡される日付形式は 'yyyy-MM-dd...

仮想マシン VMware に Kali Linux をインストールする最新の超詳細なグラフィック チュートリアル

目次1. システムイメージファイルをダウンロードする2. 新しい仮想マシンを作成する3. Kali ...

MySQL の自動インクリメント主キーが連続していないのはなぜですか?

目次1. はじめに2. 自己増分ストレージの説明3つの自己付加価値修正メカニズム4. 自己評価を修正...

MySQLデータベースイベントスケジュール実行タスクの詳細な説明

1. 背景プロジェクトの業務が進むにつれて、データベース テーブルの数がどんどん大きくなり、ハードデ...

DockerコンテナにRedisをデプロイする手順の紹介

目次1 つの Redis 設定ファイル2 Dockerコマンドの開始3 docker-compose...

Linux のスケジュールされたタスクの crontab のインストールと使用の詳細な説明

crontabをインストールするyum install crontabs CentOS 7が付属して...

WeChatアプレットwebViewにH5を埋め込む方法の例

序文WeChat ミニプログラムは新しいオープン機能を提供します!ついにミニプログラムにHTMLペー...

React 純粋関数コンポーネント setState がページ更新を更新しない問題の解決方法

目次問題の説明:原因分析:解決:補足: Reactでは、フックが使用されている場合、useState...

Linuxカーネルのアクセス制御セキュリティを強化する方法

背景以前、当社のプロジェクト チームは、Windows、Linux、macOS の 3 つの主要なオ...