Vue3 の ref と toRef の違いを簡単に分析します

Vue3 の ref と toRef の違いを簡単に分析します

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • setup+ref+reactive は vue3 の応答性を実装します
  • Vueのref属性の詳細な説明
  • Vue3 の参照と参照の詳細
  • Vue3 のリアクティブ関数 toRef 関数 ref 関数の紹介
  • Vue.js $refs 使用例の説明
  • Vue3.0 における Ref と Reactive の違いの詳細な分析
  • Vue3 における ref と reactive の詳細な説明と拡張
  • Vue3 の組み合わせ API における setup、ref、reactive の完全な使用方法
  • Vue での ref の使用法とデモンストレーション

<<:  MySQL 8.0.15 のインストールと設定のグラフィックチュートリアル

>>:  CentOS7 では、MySQL8 のマスター スレーブ バックアップと毎日のスケジュールされたフル バックアップが有効になります (推奨)

推薦する

MySQLデータベースイベントスケジュール実行タスクの詳細な説明

1. 背景プロジェクトの業務が進むにつれて、データベース テーブルの数がどんどん大きくなり、ハードデ...

MySQLテーブルの自動インクリメント列の初期値をリセットする方法

MySQLテーブルの自動インクリメント列の初期値をリセットする方法1. 問題の説明MySQL データ...

Linux mysql5.5 を mysql5.7 にアップグレードする手順と落とし穴

目次Linux MySQL 5.5 が MySQL 5.7 にアップグレードされました1. mysq...

DockerにFastDFSをインストールする方法

画像をプルする docker pull season/fastdfs:1.2トラッカーを開始 doc...

ユーザーがフォームを繰り返し送信するのを防ぐ方法の概要

重複したフォーム送信は、マルチユーザー Web アプリケーションで最も一般的で厄介な問題です。重複送...

Reactコンポーネントのライフサイクルの詳細な説明

目次1.ライフサイクルとは何か2. 読み込みプロセス1.コンストラクタ2. レンダリング3. コンポ...

MySql でデータの重複挿入を回避する 3 つの方法

序文MySql で主キーの競合または一意キーの競合が発生した場合、挿入方法に応じてエラーを回避するた...

JS でシンプルなデータ監視を実装する方法

目次概要最初のステップステップ2なぜ別の _data が必要なのでしょうか?データにもう少しデータを...

MySQL 8.0 で列を素早く追加する方法

序文: MySQL 8.0 では高速な列追加がサポートされ、数秒で大きなテーブルにフィールドを追加で...

MySQLクエリのパフォーマンスを分析する方法

目次スロークエリの基礎: データ取得の最適化データベースから不要なデータが要求されていないか確認する...

Vue3におけるキーの役割と動作原理についての簡単な説明

このキー属性の機能は何ですか?まずは公式の説明を見てみましょう。 kekey 属性は主に、新しいノー...

Webpack プロジェクトでローダー プラグインをデバッグする方法

最近、webpackの使い方を学んでいたときに、webpack-replace-loaderの設定正...

MySQL で CURRENT_TIMESTAMP を使用する方法

目次CURRENT_TIMESTAMPの使用CURRENT_TIMESTAMPを使用したタイムスタン...

ドラッグ可能なログインボックスを実現するネイティブJS

この記事では、ネイティブ JS で実装されたドラッグ可能なログイン ボックスを紹介します。その効果は...

Discuz! フォーラムに設定オプションを追加する方法

Discuz! フォーラムにはバックグラウンドで多くの設定オプションがあり、これらの設定オプションを...