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 をインストールするための詳細なチュートリアル

推薦する

MySQL 8.0.18はデータベースにユーザーを追加し、権限を付与します

1. データベースにログインするには、rootユーザーを使用することをお勧めします。 mysql -...

Docker のインストールと構成イメージの高速化の実装

目次DockerバージョンCentOS に Docker エンジンをインストールするシステム要件古い...

Linuxでkv設定ファイルを変更するにはsedコマンドを使用します

sed は Unix の文字ストリーム エディタ、つまりストリーム エディタです。行指向であり、行単...

Dockerコンテナを終了した後も実行を継続する方法

現象:イメージを実行します (例: ubuntu14.04)。 docker run -it --r...

MacでNodeとnpmを完全にアンインストールする方法

npmアンインストール sudo npm アンインストール npm -g この文に遭遇して npm ...

HTMLの基本概念の詳細な説明

HTMLとは何ですか? HTML は Web ページを記述するために使用される言語です。 •HTML...

VMware12 インストール centOS8 構成グラフィック チュートリアルの詳細説明 (vm 仮想マシン インストール centos8 チュートリアル)

数日前に CentOS8 がリリースされました。8 の最初のバージョンですが、今日は VM12 に ...

Ubuntuが仮想マシンでインターネットに接続できない問題の解決策

インターネットに接続できない仮想マシンをセットアップするのは非常に面倒です。ここでは、Ubuntu ...

シンプルなウェブページレイアウトの構造と表現原理の共有

構造とパフォーマンスの紹介HTML 構造、CSS 表現、JavaScript 動作。Web ページの...

HTML に埋め込まれた MP4 形式のビデオが再生できないのはなぜですか?

次のコードは、私の test.html にあります。ビデオは、c:\test.html などの絶対パ...

Vue.jsはカレンダー機能を実装します

この記事では、カレンダー機能を実装するためのVue.jsの具体的なコードを例として紹介します。具体的...

CSS3 でのシンプルな LED デジタル時計の実装方法

これは多くの人がやったことがあるはずです。ただうずうずして書きたかったので、時間をかけていじってダー...

JavaScript 関数はランダムな色の検証コードをカプセル化します (完全なコード)

数字、文字、またはランダムな色の数字と文字の混合で構成される n 桁の確認コード。以下に完全なコード...

シェルを使用して複数のサーバーでバッチ操作を実行する方法

目次SSHプロトコルパスワード接続プロセスsshツールssh公開鍵ログインバッチ操作複数サーバーファ...

JavaScriptプロトタイプチェーン図のまとめと実践

目次プロトタイプチェーンプロトタイプチェーンに基づいてシンプルなJQueryライブラリを実装すること...