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 をアップロードおよびダウンロードする方法 (画像付き)

推薦する

Javascript で関数のカリー化とデカリー化を実装する方法

関数のカリー化(黒い疑問符の顔)? ? ?カレー(黒い疑問符の顔)? ? ?これは完璧な中国語翻訳で...

MySQLでユーザーを作成し、権限を管理する方法

1. ユーザーとパスワードの作成方法1. MySQLデータベースに入る mysql> mysq...

MySQL 結合クエリ構文と例

接続クエリ:これは、2 つのクエリ (またはテーブル) の各行をペアで接続した結果です。つまり、1 ...

Dockerでコンテナを作成するときのディレクトリ権限

昨日プロジェクトを書いていた時に、MySQL の派生版である Percona を使う必要があったので...

Vueはテーマ切り替えのための複数のアイデアを実装します

目次テーマを動的に変更する最初の方法: 動的コンポーネント2番目の方法はルーティング分離です要約する...

MYSQL インストールの解凍バージョンと発生したエラーと解決策

1 インストールMYSQL 公式サイトから対応する解凍バージョンをダウンロードし、必要なディレクトリ...

Douyin ロゴを作成する手順の CSS3 分析

「Tik Tok」も大人気で、ユーザー数は7億人と言われています。今日は、注目を集めるためにTikT...

HTML テーブルの行間隔を変更する方法の例

HTML テーブルを使用する場合、行間隔を変更する必要がある場合がありますが、余白、パディング、折り...

JS を使用して要素が配列であるかどうかを判断する例

検証できるデータの種類は次のとおりです a = [1,2,3,4,5,6]とします。 b = [とし...

Docker で FastDFS ファイル システムを構築する (マルチイメージ チュートリアル)

目次FastDFSについて1. 画像を検索する2. イメージをインストールする3.1. 必要なディレ...

MySQL の起動オプションとシステム変数の例の詳細な説明

目次ブートオプションコマンドラインパラメータの長い形式と短い形式設定ファイル構成グループシステム変数...

入力ボックスのプレースホルダーテキストのデフォルトの色を変更する -webkit-input-placeholder メソッド

HTML5 では、入力用のネイティブ プレースホルダー属性が追加されており、これは高度なブラウザでサ...

MySQL 8.0.17 解凍版のインストールと設定方法のグラフィックチュートリアル

インストール中に遭遇した問題を記録しておきますので、皆様のお役に立てれば幸いです。 1. ダウンロー...

ウェブアニメーションのフレームレートFPSを計算する方法

目次スムーズなアニメーションの基準方法1: Chromeデベロッパーツールを使用する方法 2: フレ...

MySQL ユーザー権限管理の実装

1. MySQL の権限の概要MySQL には、権限を制御する 4 つのテーブルがあります。user...