概要 Vue は応答性の高いデータ オブジェクト (reactive、ref、toRef、toRefs) を作成します。

1. reactive

reactive メソッドは、受信オブジェクトに基づいて deeply 応答性の高いオブジェクト (プロキシ プロキシ オブジェクト) を作成して返します。

reactive は、受信した オブジェクト をラップし、そのオブジェクトの
Proxy プロキシ オブジェクト を作成します。これは ソース オブジェクトのリアクティブ コピーであり、元のオブジェクト と等しくありません。 == "深く" == ソース オブジェクトのすべてのネストされたプロパティ
を変換し、その中の参照参照を解凍して維持します。

応答オブジェクトの属性値を変更すると、レベルの深さに関係なく、応答性がトリガーされます。属性の追加と削除も反応性をトリガーします。

2. ref

ref 関数は、データ項目を 応答性の ref オブジェクト にパッケージ化するために使用されます。任意のデータ型のパラメータを、この ref オブジェクト内の value プロパティ の値として受け取ります。

• 値型データの生成 (String、Number、Boolean、Symbol) リアクティブオブジェクト

• は、ref object.value を使用してこの値にアクセスまたは変更できます。

• #オブジェクト型および配列型の応答オブジェクトを生成する

  (オブジェクトと配列は通常、ref モードを使用せず、より便利なリアクティブ モードを使用します)

3. リアクティブ比較 ref

• 定義データの観点からの比較:
  • ref は定義に使用されます。 :

    任意のデータ型

  • reactive は次の定義に使用されます:

    オブジェクト (または配列) 型のデータ

ref と reactive を選択するにはどうすればよいですか?提案:

• 基本型の値 (文字列、数値、ブール値、シンボル) または単一値オブジェクト ({count: 1} のような 1 つの属性値のみを持つオブジェクト) ref を使用します

• #参照型の値 (オブジェクト、配列) には reactive を使用します

• #あるものとの比較原則的な観点:
  • ref は、

    Object.defineProperty() の get および set を通じて応答性 (データ ハイジャック) を実装します。 。

  • reactive は、

    Proxy を使用して応答性 (データ ハイジャック) を実装し、Reflect Data# を通じて source object を内部的に操作します。

##使用法の観点からの比較:

• 参照定義データ: データへのアクセスまたは変更には
  .value# データ定義が必要です
  • ##reactive による: データの操作もデータの読み取りも .value
  を必要としません。
  4. toRef

#レスポンシブ オブジェクト (リアクティブ カプセル化) の prop (プロパティ) の ref を作成し、保持します。応答性

• 両者は参照関係を維持します

• 構文:
const 属性名 = toRef(object,'プロパティ名')

5. toRefs

toRefs は、応答オブジェクトを破棄し、

すべてのプロパティ

を ref

# に変換する実用的なメソッドです。 ##レスポンシブ オブジェクト (リアクティブ カプセル化) を通常のオブジェクトに変換する

##オブジェクトの各プロパティ (Prop) は、対応する ref

• ##2 つ参照関係を維持する

• #構文:

  const 属性名 = toRefs(object,'プロパティ名')
注

: reactive によってカプセル化された reactive オブジェクトは、構造解除によって直接返されるべきではありません。これは応答的ではありません。

toRef を通じて処理し、分解して返すことができるため、応答性が高くなります。

const state = reactive({ 
		age: 20,
      	name: 'zhangsan'});
return {...state}; // 错误的方式，会丢失响应式
return toRefs(state); // 正确的方式
//最佳方式
return ...toRefs(state)//将对象的各个属性的ref解构到对象根下面。

6. いくつかの質問なぜ行うのかリアクティブ関数がまだありますか? ref 関数が必要ですか?

特定の変数だけをレスポンシブにしたい場合は、reactive を使うと面倒なので、vue3 では単純な値を監視する ref メソッドを用意していますが、ref だけで監視できるわけではありません。単純な値を入力すると、その最下層がリアクティブであるため、リアクティブが持つすべてのものが含まれます。

覚えておいてください: ref は本質的にリアクティブでもあり、ref(obj) は reactive({value: obj}) と同等です

#[関連する推奨事項:

vue.js ビデオ チュートリアル]

以上が概要 Vue は応答性の高いデータ オブジェクト (reactive、ref、toRef、toRefs) を作成します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。