Vue3.0 における Ref と Reactive の違いの詳細な分析

Vue3.0 における Ref と Reactive の違いの詳細な分析

参照と反応

参照

Ref は、レスポンシブ データの基本タイプを作成するために使用されます。テンプレートは、デフォルトでデータを表示するために value を呼び出します。メソッドの変更には値の値の変更が必要です

<!-- テンプレート構文> 
<テンプレート>
   <div>{{状態}}</div>
</テンプレート> 
//js スクリプトのセットアップ(){
     状態 = ref(10) とする 
     状態値 = 11
     {状態} を返す
}

反応的

Reactive は、参照型のレスポンシブ データを作成するために使用されます。

<!-- テンプレート構文> 
<テンプレート>
   <div>{{状態名}}</div>
</テンプレート> 
//js スクリプトのセットアップ(){
     状態をreactive({name:'aaa'}})とします。 
     state.name = '張山'
     {状態} を返す
}

RefとReactiveの違い

Ref の本質は Reactive を通じて作成されます。Ref(10)=>Reactive({value:10});

Ref はテンプレート呼び出しで value を直接省略できます。メソッド内の変数の値を変更するには、 value の値を変更して正常に変更する必要があります。 Reactive はテンプレートに完全に記述する必要があります。そうしないと、データ全体が表示されます。

Reactive の本質は、各レイヤーの番号をプロキシ オブジェクトに解析することです。Reactive の応答性は、デフォルトで再帰的です。特定のレイヤーの値を変更すると、そのレイヤーが再帰的に呼び出され、DOM が再レンダリングされます。

shallowRef と shallowReactive

Ref と Reactive は再帰的なレスポンスを作成し、JSON データの各レイヤーをプロキシ オブジェクトに解析します。shallowRef と shallowReactive は非再帰的なレスポンス オブジェクトを作成します。shallowReactive によって作成されたデータは、最初のデータ レイヤーが変更された場合に DOM を再レンダリングします。

 var 状態 = 浅いリアクティブ({
    a:'a'、
    ガールフレンド:{
       b:'b',
       f:{
          c:'c',
          s:{d:'d'}
       }
    }
 })
 状態.a = '1'
 //最初のデータ層を変更すると、ページが再レンダリングされます //state => Proxy {a:"a",gf:{...}}
//最初のレイヤーを変更せず、他のデータのみを変更すると、ページは再レンダリングされません。たとえば、state.gf.b = 2

shallowRefによって作成されたレスポンシブオブジェクトは、DOMを再レンダリングするために値全体を変更する必要がある。

var 状態 = 浅いRef({
   a:'a'、
    ガールフレンド:{
       b:'b',
       f:{
          c:'c',
          s:{d:'d'}
       }
    }
})
状態.値.a = 1
/*
再レンダリングできません。shallowRef の原理は、shallowReactive({value:{}}) によっても作成されます。再レンダリングするには、値を変更する必要があります*/
状態.値 = {
    a:'1'、
    ガールフレンド:{
       b:'2',
       f:{
          c:'3',
          s:{d:'d'}
       }
    }
}

shallowRefを使用して特定のデータ層のみを更新したい場合は、triggerRefを使用できます。

var 状態 = 浅いRef({
   a:'a'、
    ガールフレンド:{
       b:'b',
       f:{
          c:'c',
          s:{d:'d'}
       }
    }
})
状態.値.gf.fsd = 4
トリガー参照(状態)

ページは再レンダリングされます

toRaw --- ページをレンダリングせずにデータのみを変更します

ページのレンダリングを行わずにレスポンシブ データのみを変更する場合は、toRaw メソッドを使用できます。

var obj = {name:'テスト'}
var 状態 = リアクティブ(obj)
var obj2 = toRaw(状態)
obj2.name = 'zs' // ページはレンダリングされません----
//ref で作成された場合は、値を取得します var obj = {name:'test'}
var 状態 = ref(obj)
var obj2 = toRaw(状態.値)

markRaw --- データを追跡しない

データを追跡したくない場合は、このメソッドを呼び出してレスポンシブにすることができます。そうすると、変更されたデータを追跡してページを再レンダリングすることはできなくなります。

var obj = {name:'テスト'}
obj = markRaw(obj)
var 状態 = リアクティブ(obj)
state.name = 'zs' // データページは変更できず、変更されません

toRef --- UIを変更せずにデータソースに関連付ける

ref を使用してレスポンシブ変数を作成すると、その変数はソース データに関連付けられません。ソース データに関連付けるが、データが変更されたときに UI を更新しない場合は、toRef を使用して作成する必要があります。

var obj = {name:'テスト'}
var 状態 = ref(obj.name)
state.name = 'zs' //この時点ではobjのname属性値は変更されず、UIは自動的に更新されます///
var obj = {name:'テスト'}
var state = toRef(obj,'name') // 設定できる属性値は 1 つだけです state.name = 'zs' // obj の name 属性値は変更されますが、UI は更新されません

toRefs --- 複数のtoRefプロパティ値を設定する

複数のtoRefプロパティ値を設定する場合は、toRefsを使用できます。

var obj = {name:'test',age:16}
var 状態 = toRefs(obj)
state.name.value = 'zs' //obj の名前のプロパティ値も変更されますが、UI は更新されません state.age.value = 18 //obj の年齢のプロパティ値も変更されますが、UI は更新されません

customRef --- ref をカスタマイズする

customRefメソッドを通じてレスポンシブなrefメソッドをカスタマイズできます。

関数 myRef(値){
   /*
    customRef 関数は、get/set の 2 つのメソッドを持つオブジェクトを返します。作成されたオブジェクトがデータを取得すると、get メソッドにアクセスでき、作成されたオブジェクトが値を変更すると、set メソッドがトリガーされます。customRef 関数には、track/trigger の 2 つのパラメーターがあります。track パラメーターは追跡を意味します。get メソッドで呼び出され、いつでもデータの変更を追跡します。トリガーパラメータはレスポンスをトリガーするために使用されます。setメソッドを呼び出してUIインターフェースを更新することができます*/
    戻り値: customRef((トラック,トリガー)=>{
       戻る {
          得る(){
             track()//追跡データの戻り値     
          },
          set(newVal){
             値 = newVal
             trigger()//UIインターフェースを更新}
       }
    })

}

設定(){
   var 年齢 = myRef(18)
   年齢値 = 20
}

ref バンドルされたページのラベル

Vue2.0 では this.refs を通じて DOM 要素を取得できますが、Vue3 ではこの操作がキャンセルされます。refs がない場合は、ref() メソッドを直接使用してレスポンシブ変数を生成し、それを DOM 要素にバインドできます。

<テンプレート>
   <div ref="ボックス"></div>

</テンプレート>
'vue' から {ref,onMounted} をインポートします。
/*
 セットアップメソッドは、ライフサイクルの beforeCreate と created の間に呼び出されます*/
<スクリプト>
   設定(){
      var ボックス = ref(null)
      マウント時(()=>{
         console.log('onMounted',box.value)
      })
      コンソールログ(ボックス値)
      {ボックス}を返す

   }

</スクリプト>

要約する

Vue3.0 における Ref と Reactive の違いについての記事はこれで終わりです。Vue3.0 における Ref と Reactive の違いについてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue3 におけるリアクティブ関数宣言配列メソッド
  • Vue3 のリアクティブの詳細な理解
  • Vue3 の ref、computed、reactive、toRefs をご存知ですか?
  • setup+ref+reactive は vue3 の応答性を実装します
  • Vue3 のリアクティブ関数 toRef 関数 ref 関数の紹介
  • Vue3でリアクティブに直接値を割り当てることができない問題の解決方法

<<:  MySQL ストアドプロシージャとストアドファンクションの詳細な説明

>>:  Ubuntu 18.04 に phpMyAdmin をインストールするための詳細なチュートリアル

推薦する

JSはじゃんけんゲームを実装します

この記事の例では、じゃんけんゲームを実装するためのJSの具体的なコードを参考までに共有しています。具...

js シンプルで粗雑なパブリッシュとサブスクライブのサンプルコード

パブリッシュ/サブスクライブとは何ですか?例を挙げてみましょう。あなたは服を買うために店に行きます。...

Navicatを使用してクラウドサーバーデータベースにリモート接続する方法

秘密鍵を開かずにリモート サーバーのデータベースに接続するのは非常に便利です。新しい接続でデータを入...

LinuxでTomcatのポート番号を変更する方法

ここには複数の Tomcat があります。それらを同時に使用する場合は、ポート番号を別の番号に変更す...

Tencent Cloud Serverをゼロから導入する方法

初めての投稿ですので、間違いや問題点などありましたら、コメント欄で指摘していただければ、今後改善させ...

モバイルデバイスでのフリーズ問題に対する CSS3 ソリューション (アニメーション パフォーマンスの最適化)

1. CSS、jQuery、Canvasを使用してアニメーションを作成する1. キャンバス利点: ...

JavaScript フロー制御 (分岐)

目次1. プロセス制御2. シーケンシャルプロセス制御3. 分岐フロー制御if文1. 支店構造2. ...

Linuxサーバー間のリアルタイムファイル同期の実現

使用シナリオ既存のサーバー A と B の場合、サーバー A の指定されたディレクトリ (たとえば、...

JavaScript に関する 6 つの奇妙で便利な点

目次1. 解体のヒント2. デジタルセパレーター3. try...catch...finally が...

JS デコレータ パターンと TypeScript デコレータ

目次デコレータパターンの紹介TypeScript のデコレータデコレータの使用デコレーターファクトリ...

MySQLプロセス関数の一般的な使用例の分析

この記事では、例を使用して MySQL プロセス関数の一般的な使用方法を説明します。ご参考までに、詳...

js はマウスによる画像の切り替えを実装します (タイマーなし)

この記事の例では、マウス切り替え画像を実現するためのjsの具体的なコードを参考までに共有しています。...

CSS の一部のプロパティの前には「*」または「_」が付きます。

CSS の一部のプロパティの前には「*」または「_」が付きます。さまざまなブラウザを識別する例えば...

UTF-8 ファイルの Unicode 署名 BOM (バイト オーダー マーク) の問題

最近、UTF8 エンコードの中国語 Zen Cart Web サイトをデバッグしているときに奇妙な現...

高品質なウェブページのデザイン方法 高品質なウェブページ(画像とテキスト)のデザイン経験

オープンプラットフォームの増加に伴い、そこから派生するさまざまなアプリケーションサービスも増加傾向に...