1. 参照と反応覚えておいてください: ref も本質的に反応的であり、ref(obj) は reactive({value: obj}) と同等です。
1. 反応的
2.参照リアクティブがあるのに、なぜ ref が必要なのでしょうか?変数をレスポンシブにしたいだけの場合、リアクティブを使うのは面倒です。そのため、vue3 では単純な値を監視するための ref メソッドを提供しています。ただし、ref で渡せるのは単純な値だけというわけではありません。その基礎レイヤーはリアクティブであるため、リアクティブが持つすべての機能を備えています。それは昔から言われていることです。 覚えておいてください: ref も本質的に反応的であり、ref(obj) は reactive({value: obj}) と同等です。
2. shallowRef と shallowReactive
1. ref と shallowRef
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. マークRawtoRaw とは異なり、markRaw によってラップされたデータは追跡されません。 まだ使い道が見つかっていない(手動の犬の頭) obj1 = {名前: "lijing", 年齢: 18}とします obj2 = markRaw(obj1); とします。 //この時点では、reactive でラップされたデータはレスポンシブなオブジェクトですが、追跡されず、効果も発生しません。let state1 = reactive(obj2) console.log(obj1 === obj2); //true 5. toRef と toRefsref と 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL データベースの詳細な説明 - 複数テーブル クエリ - 内部結合、外部結合、サブクエリ、相関サブクエリ
>>: CentOS7 で yum ソースをインストールし、コマンド rz と sz をアップロードおよびダウンロードする方法 (画像付き)
MySQL 双方向バックアップはマスター-マスター バックアップとも呼ばれ、両方の MySQL サー...
この記事では、呼吸カルーセル効果を実現するためのjQueryの具体的なコードを参考までに共有します。...
データシート /* Navicat SQLite データ転送 ソースサーバー: school ソース...
目次1. コンポーネント切り替え方式方法1: v-ifとv-elseを使用する方法 2: 組み込みコ...
CSS3 border-image プロパティを使用すると、要素の周囲に画像の境界線を設定できます。...
このブログは、MySQL8.0.15 を正常にインストールしたことを思い出すために書きました。以前は...
1. 日付のサイズを比較するには、XML に渡される日付形式は 'yyyy-MM-dd...
目次1. システムイメージファイルをダウンロードする2. 新しい仮想マシンを作成する3. Kali ...
目次1. はじめに2. 自己増分ストレージの説明3つの自己付加価値修正メカニズム4. 自己評価を修正...
1. 背景プロジェクトの業務が進むにつれて、データベース テーブルの数がどんどん大きくなり、ハードデ...
目次1 つの Redis 設定ファイル2 Dockerコマンドの開始3 docker-compose...
crontabをインストールするyum install crontabs CentOS 7が付属して...
序文WeChat ミニプログラムは新しいオープン機能を提供します!ついにミニプログラムにHTMLペー...
目次問題の説明:原因分析:解決:補足: Reactでは、フックが使用されている場合、useState...
背景以前、当社のプロジェクト チームは、Windows、Linux、macOS の 3 つの主要なオ...