参照と反応参照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 をインストールするための詳細なチュートリアル
この記事の例では、じゃんけんゲームを実装するためのJSの具体的なコードを参考までに共有しています。具...
パブリッシュ/サブスクライブとは何ですか?例を挙げてみましょう。あなたは服を買うために店に行きます。...
秘密鍵を開かずにリモート サーバーのデータベースに接続するのは非常に便利です。新しい接続でデータを入...
ここには複数の Tomcat があります。それらを同時に使用する場合は、ポート番号を別の番号に変更す...
初めての投稿ですので、間違いや問題点などありましたら、コメント欄で指摘していただければ、今後改善させ...
1. CSS、jQuery、Canvasを使用してアニメーションを作成する1. キャンバス利点: ...
目次1. プロセス制御2. シーケンシャルプロセス制御3. 分岐フロー制御if文1. 支店構造2. ...
使用シナリオ既存のサーバー A と B の場合、サーバー A の指定されたディレクトリ (たとえば、...
目次1. 解体のヒント2. デジタルセパレーター3. try...catch...finally が...
目次デコレータパターンの紹介TypeScript のデコレータデコレータの使用デコレーターファクトリ...
この記事では、例を使用して MySQL プロセス関数の一般的な使用方法を説明します。ご参考までに、詳...
この記事の例では、マウス切り替え画像を実現するためのjsの具体的なコードを参考までに共有しています。...
CSS の一部のプロパティの前には「*」または「_」が付きます。さまざまなブラウザを識別する例えば...
最近、UTF8 エンコードの中国語 Zen Cart Web サイトをデバッグしているときに奇妙な現...
オープンプラットフォームの増加に伴い、そこから派生するさまざまなアプリケーションサービスも増加傾向に...