1. refがコピーされ、ビューが更新されますrefを使用してオブジェクトのプロパティ値をレスポンシブデータに変換する場合 レスポンシブ データを変更しても元のデータには影響しません。 同時にビューも更新されます。 Ref はコピーを意味します。コピーしても元のデータには影響しません。 <テンプレート> <div> <div> <div>{{stateObj} </div> <button @click="func1">ボタン</button> </div> </div> </テンプレート> <スクリプト> 'vue' から {ref} をインポートします エクスポートデフォルト{ 名前: 'アプリ'、 設定(){ let obj={name:"张三",age:22} // オブジェクト内のプロパティをレスポンシブ データに変換します // オブジェクトをレスポンシブ データに変換する代わりに let stateObj=ref(obj.name) 関数func1(){ stateObj.value="張三が李斯になる"; //元のデータは変更されていません。元のデータ obj {name: "张三", age: 22} console.log("元のデータ obj",obj) // レスポンシブデータが変更されました/** レスポンシブ stateObj RefImpl { _rawValue: "張三が李思になる", _shallow: false, __v_isRef: true、_value: "張三が李四になる" } **/ // ref オブジェクトになります console.log("responsive stateObj",stateObj) } {stateObj,func1} を返す }, } </スクリプト> 2. toRefは参照なので、ビューは更新されませんtoRefを使用してオブジェクトのプロパティをレスポンシブデータに変換する場合 レスポンシブデータを変更すると、元のデータに影響します データがtoRefを通じて作成された場合、値が変更された後、データはビューをトリガーしません。 toRefは参照です。前のオブジェクトのプロパティを参照します。 したがって、変更すると、元のデータの値に影響します。 <テンプレート> <div> <div> <div>{{状態}}</div> <button @click="func1">ボタン</button> </div> </div> </テンプレート> <スクリプト> 'vue' から { toRef } をインポートします エクスポートデフォルト{ 名前: 'アプリ'、 設定(){ let obj={name:"张三",age:22} // オブジェクト内のプロパティ名をレスポンシブ データに変換します // オブジェクトをレスポンシブ データに変換する代わりに let state=toRef(obj, 'name'); console.log('toRef',状態) 関数func1(){ state.value="私はLi Siです"; コンソールログ('obj',obj) console.log('状態',状態) } {state,func1} を返す }, } </スクリプト> 3. 結論ref コピー、レスポンシブ データの変更、以前のデータには影響しませんが、インターフェイスは変更されます。 toRef 参照の場合、レスポンシブ データを変更すると以前のデータに影響し、インターフェイスは更新されません。 toRefの使用例 レスポンシブデータを元のデータに関連付けたい場合。 レスポンシブデータを更新した後、ビューを更新したくない場合は、toRefを使用できます。 まとめ: refとtoRefの違い (1)refの本質はコピーであり、応答データの変更は元のデータに影響を与えない。toRefの本質は参照関係であり、応答データの変更は元のデータに影響を与える。 (2)refデータが変更されると、インターフェースは自動的に更新される。toRefデータが変更されると、インターフェースは自動的に更新されない。 (3) toRefに渡されるrefは異なります。toRefは2つのパラメータを受け取ります。最初のパラメータはどのオブジェクトか、2番目のパラメータはオブジェクトのどの属性かです。 要約するVue3 の ref と toRef の違いについての記事はこれで終わりです。Vue3 の ref と toRef の違いについてさらに詳しく知りたい方は、123WORDPRESS.COM の過去記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0.15 のインストールと設定のグラフィックチュートリアル
>>: CentOS7 では、MySQL8 のマスター スレーブ バックアップと毎日のスケジュールされたフル バックアップが有効になります (推奨)
1. 背景プロジェクトの業務が進むにつれて、データベース テーブルの数がどんどん大きくなり、ハードデ...
MySQLテーブルの自動インクリメント列の初期値をリセットする方法1. 問題の説明MySQL データ...
目次Linux MySQL 5.5 が MySQL 5.7 にアップグレードされました1. mysq...
画像をプルする docker pull season/fastdfs:1.2トラッカーを開始 doc...
重複したフォーム送信は、マルチユーザー Web アプリケーションで最も一般的で厄介な問題です。重複送...
目次1.ライフサイクルとは何か2. 読み込みプロセス1.コンストラクタ2. レンダリング3. コンポ...
序文MySql で主キーの競合または一意キーの競合が発生した場合、挿入方法に応じてエラーを回避するた...
目次概要最初のステップステップ2なぜ別の _data が必要なのでしょうか?データにもう少しデータを...
序文: MySQL 8.0 では高速な列追加がサポートされ、数秒で大きなテーブルにフィールドを追加で...
目次スロークエリの基礎: データ取得の最適化データベースから不要なデータが要求されていないか確認する...
このキー属性の機能は何ですか?まずは公式の説明を見てみましょう。 kekey 属性は主に、新しいノー...
最近、webpackの使い方を学んでいたときに、webpack-replace-loaderの設定正...
目次CURRENT_TIMESTAMPの使用CURRENT_TIMESTAMPを使用したタイムスタン...
この記事では、ネイティブ JS で実装されたドラッグ可能なログイン ボックスを紹介します。その効果は...
Discuz! フォーラムにはバックグラウンドで多くの設定オプションがあり、これらの設定オプションを...