Vue3 応答関数の比較: toRef() と toRefs()

ref は、基本的なデータ型を処理する応答性の高い API 関数です。setup で定義された変数は宣言できます。レスポンシブ

API

によってラップおよび処理されていないテンプレート変数データで を直接使用すると、レスポンシブ機能がありません

つまり、データは頻繁に変更されます。ロジックはありますが、ページは更新されないため、非応答データを応答データに変える方法

toRef() と toRefs()# を使用する必要があります。 ## これら 2 つの componsion API

は単に概念を説明するだけですが、多くの場合抽象的で理解しにくいため、具体的な例から始める必要があります

toRef() function

Function: value 値が別のオブジェクト内の特定の属性値を指す ref オブジェクトを作成します。これは、オリジナルオブジェクト関連。 [関連する推奨事項: vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]

は、応答オブジェクトの属性に基づいて、対応する

ref# を作成することです。 . ##、この方法で作成された ref は、そのソース属性と同期され、ソース オブジェクトとの参照関係を持ちます。ソース属性の値を変更すると、

ref

値

構文

: const 変数名 = toRef(ソース オブジェクト、ソース オブジェクトの下のプロパティ) 例:

const name = toRef(person,'name')

Application

: レスポンシブで特定の属性を提供したい場合外部使用のためのオブジェクトを別途作成します。応答性を失いたくない場合は、prop の ref を合成関数 に渡すことも便利です。

欠点

: toRef()は1つの属性しか処理できませんが、toRefs(source object)は一度にバッチで処理できます<pre class="brush:js;toolbar:false;">&lt;script setup&gt; import { reactive } from &quot;vue&quot;; const person = reactive({ name:&quot;川川&quot;, age: 18, job: { web: &amp;#39;前端开发&amp;#39;, trade: &amp;#39;互联网&amp;#39; } }); &lt;/script&gt;</pre>テンプレートにデータをレンダリングしたい場合は、次のように記述できます

{{person.name}} -{{person.age}}-{{person.job.web}}-{{person.job.trade}}

テンプレートにそれほど長く書きたくない場合は、以下に示すように、最初にテンプレートを分解できます##

<script setup>
import { reactive } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

const { name, age} = person;
const { web,trade} = person.job;
</script>

次に、以下に示すように、テンプレートで変数を直接使用できます

{{name}}-{{age}}-{{web}}-{{trade}}

ここで、変数データを変更したい場合、ロジック内のデータは変更されることがわかりますが、データはページ内の要素は更新されません。つまり、応答性が失われます。例: 次のテンプレートでは、name 属性と age 属性をそれぞれ変更します

<button @click="handleChangeAttrs">修改属性</button>

ロジック コード

<script setup>
import { reactive } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

const { name, age} = person;
const { web,trade} = person.job;

// 这样直接操作数据是无法修改的,因为它不是一个响应式数据,只是一个纯字符串,不具备响应式
function handleChangeAttrs() {
    name = "itclanCoder";
    age = 20;
}
</script>

Ifデータを変更し、応答性をサポートし、非応答データを応答データに変換したい場合は、以下に示すように、

toRef(source Object、source Object の下に指定された属性) 関数

を借用する必要があります

<script setup>
import { reactive,toRef } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

// 想要修改指定哪个对象具备响应式,那么就使用toRef函数处理,toRef(源对象,源对象下的某个属性)
const name = toRef(person，&#39;name&#39;);  
const age = toRef(person,&#39;age&#39;);

// 经过了toRef的处理,修改变量的值,那么就需要xx.value
function handleChangeAttrs() {
    name.value = "itclanCoder";
    age.value = 20;
}
</script>

テンプレートでは、依然として上記のとおりです

{{person}}
{{name}}-{{age}}-{{web}}-{{trade}}
<button @click="handleChangeAttrs">修改属性</button>

toRef() を使用すると、関数の処理後、応答しないデータは次のことができることがわかります。データに応答すると、ソース データも同期されます。

純粋なデータ ページの表示にのみ使用される場合は、データを変換する必要はありません。レスポンシブ データの場合、データを変更する必要がある場合は、データを変更する必要があります。 、非応答データを応答データに変換する必要があります。 は

toRef()

関数

によって実装されます。 ref との違いは次のとおりです。以下に示すように、

ref

を使用してデータを処理し、

ref

を使用してデータを処理すると、ページの応答性とデータの更新も実現できます。ただし、toRef# とは異なります。 ##. 違いがあります。

<script setup>
import { reactive,toRef } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

// 使用ref
const name = ref(person.name);  
const age = toRef(person.age);

// 经过了toRef的处理,修改变量的值,那么就需要xx.value
function handleChangeAttrs() {
    name.value = "itclanCoder";
    age.value = 20;
}
</script>

データを変更すると、ページ データは更新されますが、ソース データは同期も変更もされず、参照関係はありません。refソース オブジェクトからデータのコピーを再コピーするのと同じですref()

受信するのは純粋な値です

toRefs()関数 toRef()

は、ソース オブジェクトで指定された特定の属性のみを処理できます。ソース オブジェクトに多数の属性がある場合、いちいち

toRef()

を使用するのは面倒です。 # そこでこの

toRefs () が非常に便利です。toRef() と同じ機能を持ちます。複数の ref

オブジェクトをバッチで作成し、維持することができます。

Syntax:toRefs(source object),toRefs(person)

上記のサンプル コードのように、toRefs()shown

<script setup>
import { reactive,toRefs } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

// 通过toRefs()批量处理,此时通过解构
const {name,age} = toRefs(person);  

// 经过了toRef的处理,修改变量的值,那么就需要xx.value
function handleChangeAttrs() {
    name.value = "itclanCoder";
    age.value = 20;
}
</script>

toRefs

に変更すると、合成された関数からリアクティブ オブジェクトを返す場合に便利です。これを使用すると、コンシューマ コンポーネントは、応答性を失うことなく、返されたオブジェクトを構造解除/展開できます。

import { toRefs } from "vue";
function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  // 在返回时都转为ref
  return toRefs(state)
}

// 可以解构而不会失去响应性
const { foo, bar } = useFeatureX()

Notes

toRefs は、呼び出されたときにソース オブジェクト上にのみ存在します。 Enumerable プロパティ create 参照

。まだ存在しない可能性があるプロパティの

ref

を作成する場合は、

toReftoRef() 関数と toRefs() 関数が必要な理由## を使用してください。 #目的: 応答性を失わずにオブジェクトを分解し、オブジェクト データの分解と拡散を促進します

前提

: 応答性の高いオブジェクトを対象とします (

reactive

encapsulated) 非通常のオブジェクト

Note

: リアクティブ型 (つまり reactive のもの) を作成しないでください。それ自体は単なる継続です。レスポンシブ: toRef または

toRefs

を通じて非応答データを応答データに変換する機能

概要

この toRef() と toRefs() は非常に実用的で、どちらも非応答データを応答データに変換します。ソース オブジェクトとデータを同期し、参照関係を持ちます。前者は単一属性データの処理のみをサポートしますが、後者はデータのバッチ処理をサポートします。

データが変更されると、ページ データが更新されます。この 2 つcomposition API 関数は非常に実用的です。実際のビジネス開発では、ページ上のデータを変更する必要がある場合、

が使用されます (学習ビデオ共有: vuejs)入門チュートリアル、基本プログラミング ビデオ)

以上がVue3 応答関数の比較: toRef() と toRefs()の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。