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 をアップロードおよびダウンロードする方法 (画像付き)
関数のカリー化(黒い疑問符の顔)? ? ?カレー(黒い疑問符の顔)? ? ?これは完璧な中国語翻訳で...
1. ユーザーとパスワードの作成方法1. MySQLデータベースに入る mysql> mysq...
接続クエリ:これは、2 つのクエリ (またはテーブル) の各行をペアで接続した結果です。つまり、1 ...
昨日プロジェクトを書いていた時に、MySQL の派生版である Percona を使う必要があったので...
目次テーマを動的に変更する最初の方法: 動的コンポーネント2番目の方法はルーティング分離です要約する...
1 インストールMYSQL 公式サイトから対応する解凍バージョンをダウンロードし、必要なディレクトリ...
「Tik Tok」も大人気で、ユーザー数は7億人と言われています。今日は、注目を集めるためにTikT...
HTML テーブルを使用する場合、行間隔を変更する必要がある場合がありますが、余白、パディング、折り...
検証できるデータの種類は次のとおりです a = [1,2,3,4,5,6]とします。 b = [とし...
目次FastDFSについて1. 画像を検索する2. イメージをインストールする3.1. 必要なディレ...
目次ブートオプションコマンドラインパラメータの長い形式と短い形式設定ファイル構成グループシステム変数...
HTML5 では、入力用のネイティブ プレースホルダー属性が追加されており、これは高度なブラウザでサ...
インストール中に遭遇した問題を記録しておきますので、皆様のお役に立てれば幸いです。 1. ダウンロー...
目次スムーズなアニメーションの基準方法1: Chromeデベロッパーツールを使用する方法 2: フレ...
1. MySQL の権限の概要MySQL には、権限を制御する 4 つのテーブルがあります。user...