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

以下もご興味があるかもしれません: