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 です: umask が 022 に設定されている場合、作成するファイルのデフォル...
1. インストール方法は? 1. [実行] -> [cmd] と入力して、小さな黒いウィンドウ...
Dockerfile では、run、cmd、entrypoint はすべてコマンドを実行するために使...
2次元配列の次元削減配列インスタンスメソッド concat と ES6 スプレッド演算子を使用した次...
目次1. 集計クエリ1. COUNT関数2. SUM関数3. AVG関数4. MAX関数とMIN関数...
目次1. ファイルを開くパラメータの紹介2. ファイルの読み取り3. ファイルを書き込む4. 閉じる...
ktl ツールを使用して、mysql から mysql にデータを同期します。 1. 新しいジョブス...
この記事では、お絵かきボード/サインボード機能を実現するためのJSキャンバスの具体的なコードを参考ま...
1. 基本概念1. Sitemeshはページ装飾技術です。 1 : フィルターを通してページアクセス...
目次1. NodeがHTTPサーバーを構築する2. HTTPサーバーがリクエストを取得する1. Po...
環境セントロス6.6 MySQL 5.7インストールシステムがインストールされている場合は、まずアン...
目次【効果】 【実施方法】 【効果】 【実施方法】 <テンプレート> <div i...
この記事では、タグイベントを動的に追加するためのjQueryの具体的なコードを参考までに紹介します。...
1. 環境: CentOS7、OpenSSL1.1.1k。 2. コンセプト:ルート証明書: サーバ...
恥ずかしながら、このようなよく使われるチェックボックスのスタイルを変更するために、Baidu で長い...