Vue3 の ref toRef と toRefs の違いを理解する方法

Vue3 では、レスポンシブデータを作成するための新しいメソッドがいくつか追加されました。もちろん、それぞれの機能も異なります。各メソッドには独自のアプリケーションシナリオがあります。今日は、ref、toRef、toRefs とは何かについて説明します。使い方の違いは何でしょうか？最も良い使い方は何でしょうか?

1. 基本

1.参照

（１）値型のレスポンシブデータを生成し、.valueを通じて値を変更する

<テンプレート>
 <div>{{ ageRef } }
</テンプレート>

<スクリプト>
'vue' から { ref } をインポートします
エクスポートデフォルト{
 設定（） {
  定数ageRef = ref(20)

  間隔を設定する(() => {
   年齢参照値 += 1
  }, 1000)
  
  戻る {
   年齢参照
  }
 },
}
</スクリプト>

上記のコードは ageRef 変数を定義し、ageRef を毎秒 1 ずつ増加させます。ページに表示される値も 1 ずつ増加します。

（２）反応性にも使える

上記のコードを以下のように変更し、reactive定義変数をインポートし、ref定義変数をreactiveにインポートし、テンプレートにreactive変数を表示します。最終的な効果は上記(1)と同じです。

<テンプレート>
 <div>{{ info.age }}</div>
</テンプレート>

<スクリプト>
'vue' から { ref, reactive } をインポートします
エクスポートデフォルト{
 設定（） {
  定数ageRef = ref(20)
  const 情報 = リアクティブ({
   年齢: ageRef
  })
  間隔を設定する(() => {
   年齢参照値 += 1
  }, 1000)
  
  戻る {
   情報
  }
 },
}
</スクリプト>

（３）ドムを得るために使用できる

<テンプレート>
 <div ref="eleDom">ref-dom-test</div>
</テンプレート>

<スクリプト>
'vue' から { ref, onMounted } をインポートします
エクスポートデフォルト{
 設定（） {
  const eleDom = ref(null)
  マウント時(() => {
   console.log(eleDom.value.innerHTML) // ref-dom-テスト
  })
  戻る {
   エレドム 
  }
 },
}

上記コードのコンソールには ref-dom-test が出力され、Dom 要素が取得されたことが示されます。
Dom要素を取得するには、以下のルールを満たす必要があります。

定義された ref 変数名は、コード内の eleDom など、テンプレート ref の値と一致している必要があります。

2. 参照

レスポンシブオブジェクトのプロパティ
応答性の高いrefを作成する
両者は参照関係を維持している

次のコードを見てみましょう

<テンプレート>
 <div>{{ state.age }} --- {{ ageRef }}</div>
</テンプレート>

<スクリプト>
'vue' から { toRef, reactive } をインポートします。
エクスポートデフォルト{
 設定（） {
  定数状態 = リアクティブ({
   名前: 'JL',
   年齢: 18
  })
  const ageRef = toRef(状態、'年齢')
  タイムアウトを設定する(() => {
   状態.年齢 = 20
  }, 1000)
  
  タイムアウトを設定する(() => {
   年齢参照値 = 21
  }, 2000)
  
  戻る {
   州、
   年齢参照
  }
 },
}
</スクリプト>

上記のコードでは、toRef を使用して state の age プロパティをレスポンシブ変数に変換しています。その後、1 秒後に state の age 値が 20 に変更され、その時点で ageRef も 20 になります。2 秒後に ageRef の値が 21 に変更され、その時点で state の age 値も 21 になり、2 つが相互参照関係を維持していることを示します。

toRef は応答性のためのものであり、通常のオブジェクトではありません。応答性のない目的で使用すると、出力結果は応答性がなくなります。

3. 参照

レスポンシブオブジェクトを通常のオブジェクトに変換する
オブジェクトの各プロパティは対応するrefである
両者は参照関係を維持している

次のコードを見てみましょう

<テンプレート>
 <div>{{ 名前 }}---{{ 年齢 }}}</div>
</テンプレート>

<スクリプト>
'vue' から { reactive, toRefs } をインポートします。
エクスポートデフォルト{
 設定（） {
  定数状態 = リアクティブ({
   名前: 'JL',
   年齢: 18
  })

  定数stateRefs = toRefs(状態)

  タイムアウトを設定する(() => {
   状態.年齢 = 20
  }, 1000)

  タイムアウトを設定する(() => {
   状態参照年齢値 = 21
  }, 2000)

  stateRefsを返す
 },
}
</スクリプト>

上記のコードでは、toRefs を使用して state を通常のオブジェクトに変換しています。このとき、stateRefs は直接返すことができ、name と age はテンプレート内で直接呼び出すことができます。そして、1 秒後に state の age 値が 20 に変更され、ページ上の age 値も 20 になります。2 秒後には、stateRefs の name 値が 21 に変更され、ページ上の age 値も 21 になり、両者が相互参照関係を維持していることを示します。

toRefs がレスポンシブオブジェクトを通常のオブジェクトに変換した後、各属性にはレスポンシブ ref が設定されます。このとき、その値を取得するには .value を使用する必要があります。

4. 最適な使い方

reactive はオブジェクトに反応し、ref は値型に反応します。
セットアップで toRefs(state) または toRef(state, 'xxx') を返します --- (state.xxx がテンプレートで使用されないようにするため)
Ref変数はxxxRefで名前が付けられます
複合関数がレスポンシブオブジェクトを返す場合は、toRefsを使用します。

例えば：

<テンプレート>
 <div>x:{{x}} y:{{y}}</div>
</テンプレート>

<スクリプト>
'vue' から { reactive, toRefs } をインポートします。
エクスポートデフォルト{
 設定（） {
  関数テスト() {
   定数状態 = リアクティブ({
    x: 1,
    年: 2
   })
   参照を返す(状態)
  }
  定数{x, y} = テスト()

  タイムアウトを設定する(() => {
   x.値 = 2
  }, 1000)

  戻る {
   ×、
   ええ
  }
 }
}
</スクリプト>

上記のコードでは、テスト関数内でレスポンシブオブジェクトの状態を定義し、それを通常のオブジェクトに変換してtoRefsを通じて返しています。このとき、構造を割り当てることができ、値はレスポンシブです。

2. 詳細な

1. なぜrefが必要なのか?

上で述べたように、reactive と toRef を使用すると、値の型をレスポンシブなものに変換することもできますが、それでも ref が必要なのはなぜでしょうか。

値型は応答しません (プロキシ)
setup()、computed()... はすべて値の型を返す可能性があります。Vue が ref を定義していない場合、ユーザーがレスポンシブな値の型を必要とするときに、他の手段 (reactive/toRef、reactive/toRefs) で ref を作成することになり、コードがさらにわかりにくくなります。

2. ref に .value が必要な理由

ref は値を取得するために .value を追加する必要があるのはなぜですか? なぜ面倒なのでしょうか?

refはオブジェクト（応答性は失われない）、valueは値を格納します
応答性は.valueプロパティの取得と設定によって実現されます。
.value は、リアクティブおよびテンプレート（vue コンパイル）で使用する場合は必要ありませんが、他の場合には必要です。

3. toRef と toRefs が必要なのはなぜですか?

本来の意図: 応答性を損なうことなくオブジェクトデータを分解する
前提: これは通常のオブジェクトではなく、レスポンシブオブジェクト用です
結果: 応答性の創出はなく、応答性の継続のみ

Vue3 の ref toRef と toRefs の違いを理解する方法についての記事はこれで終わりです。Vue3 の ref toRef と toRefs に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: