参照と反応参照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 と shallowReactiveRef と 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL ストアドプロシージャとストアドファンクションの詳細な説明
>>: Ubuntu 18.04 に phpMyAdmin をインストールするための詳細なチュートリアル
1. データベースにログインするには、rootユーザーを使用することをお勧めします。 mysql -...
目次DockerバージョンCentOS に Docker エンジンをインストールするシステム要件古い...
sed は Unix の文字ストリーム エディタ、つまりストリーム エディタです。行指向であり、行単...
現象:イメージを実行します (例: ubuntu14.04)。 docker run -it --r...
npmアンインストール sudo npm アンインストール npm -g この文に遭遇して npm ...
HTMLとは何ですか? HTML は Web ページを記述するために使用される言語です。 •HTML...
数日前に CentOS8 がリリースされました。8 の最初のバージョンですが、今日は VM12 に ...
インターネットに接続できない仮想マシンをセットアップするのは非常に面倒です。ここでは、Ubuntu ...
構造とパフォーマンスの紹介HTML 構造、CSS 表現、JavaScript 動作。Web ページの...
次のコードは、私の test.html にあります。ビデオは、c:\test.html などの絶対パ...
この記事では、カレンダー機能を実装するためのVue.jsの具体的なコードを例として紹介します。具体的...
これは多くの人がやったことがあるはずです。ただうずうずして書きたかったので、時間をかけていじってダー...
数字、文字、またはランダムな色の数字と文字の混合で構成される n 桁の確認コード。以下に完全なコード...
目次SSHプロトコルパスワード接続プロセスsshツールssh公開鍵ログインバッチ操作複数サーバーファ...
目次プロトタイプチェーンプロトタイプチェーンに基づいてシンプルなJQueryライブラリを実装すること...