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 のマスター スレーブ バックアップと毎日のスケジュールされたフル バックアップが有効になります (推奨)

推薦する

新しい Linux ファイル権限設定における umask の詳細な理解

序文起源は質問 1 です: umask が 022 に設定されている場合、作成するファイルのデフォル...

MySQL5.7.03 上位バージョンから MySQL 5.7.17 への置き換えインストール プロセスと見つかった問題の解決策

1. インストール方法は? 1. [実行] -> [cmd] と入力して、小さな黒いウィンドウ...

docker の run/cmd/entrypoint の違いの詳細な説明

Dockerfile では、run、cmd、entrypoint はすべてコマンドを実行するために使...

JS配列の次元削減のいくつかの方法の詳細な説明

2次元配列の次元削減配列インスタンスメソッド concat と ES6 スプレッド演算子を使用した次...

SQL 集計、グループ化、並べ替え

目次1. 集計クエリ1. COUNT関数2. SUM関数3. AVG関数4. MAX関数とMIN関数...

ファイル操作のためのLinuxシステムコール

目次1. ファイルを開くパラメータの紹介2. ファイルの読み取り3. ファイルを書き込む4. 閉じる...

KTLツールはMySQLからMySQLへのデータの同期方法を実現します

ktl ツールを使用して、mysql から mysql にデータを同期します。 1. 新しいジョブス...

JSキャンバスは描画ボードと署名ボードの機能を実現します

この記事では、お絵かきボード/サインボード機能を実現するためのJSキャンバスの具体的なコードを参考ま...

Sitemesh チュートリアル - ページ装飾技術の原理と応用

1. 基本概念1. Sitemeshはページ装飾技術です。 1 : フィルターを通してページアクセス...

HTTP サーバーとクライアントのやり取りをシミュレートする Node.js+postman

目次1. NodeがHTTPサーバーを構築する2. HTTPサーバーがリクエストを取得する1. Po...

Centos6にMysql5.7をインストールする方法

環境セントロス6.6 MySQL 5.7インストールシステムがインストールされている場合は、まずアン...

固定ボトムコンポーネントを実装した Vue の例

目次【効果】 【実施方法】 【効果】 【実施方法】 <テンプレート> <div i...

jQueryは動的タグイベントを実装します

この記事では、タグイベントを動的に追加するためのjQueryの具体的なコードを参考までに紹介します。...

Linux環境でOpenSSL証明書を生成する

1. 環境: CentOS7、OpenSSL1.1.1k。 2. コンセプト:ルート証明書: サーバ...

美しいチェックボックススタイル(複数選択ボックス)はIE8/9/10、FFなどと完全に互換性があります。

恥ずかしながら、このようなよく使われるチェックボックスのスタイルを変更するために、Baidu で長い...