Vue3-Responsive-Funktionsvergleich: toRef() vs toRefs()-View.js-php.cn

Vue3-Responsive-Funktionsvergleich: toRef() vs toRefs()

ref ist eine reaktionsfähige API-Funktion, die in setup deklarierte Variablen verarbeitet und direkt in Vorlagen verwendet werden kann ref是处理基本数据类型响应式API函数,在setup中声明定义的变量,可以直接在模板中使用

没有被响应式API包裹处理的变量数据,是不具备响应式能力的

也就是往往在逻辑中修改了数据,但是页面不会更新,那怎么样将一个非响应式数据变成响应式数据

就需要用到toRef()与toRefs()这两个componsition API的

单纯的去看概念,往往比较抽象,是难以理解的,还是需要从具体的实例出发

toRef()函数

作用:创建一个ref对象,其value值指向另一个对象中的某个属性值,与原对象是存在关联关系的。【相关推荐：vuejs视频教程、web前端开发】

也就是基于响应式对象上的一个属性,创建一个对应的ref,这样创建的ref与它的源属性是保持同步的,与源对象存在引用关系

改变源属性的值将更新ref的值

语法: const 变量名 = toRef(源对象,源对象下的某个属性)

如:const name = toRef(person,'name')

应用: 要将响应式对象中的某个属性单独提供给外部使用时,不想丢失响应式,把一个prop的ref传递给一个组合式函数也会很有用

缺点：toRef()只能处理一个属性,但是toRefs(源对象),却可以一次性批量处理

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

Nach dem Login kopieren

那在模板当中想要渲染数据可以这么写

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

Nach dem Login kopieren

如果不想在模板当中,写那么长,那么可以先解构,如下所示

<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>

Nach dem Login kopieren

那在模板中,可以直接使用变量的,如下所示

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

Nach dem Login kopieren

现在,如果我们想要去修改变量数据,会发现,逻辑中的数据会被修改,但是页面中的数据不会更新,也就是丢失了响应式比如:如下模板,分别修改名字,年龄属性

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

Nach dem Login kopieren

那在逻辑代码中

<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>

Nach dem Login kopieren

如果想要修改数据,支持响应式,将一个非响应式数据,变成一个响应式数据,需要借用toRef(源对象,源对象下指定的属性)函数,如下所示

<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>

Nach dem Login kopieren

在模板当中,仍然是如上所示

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

Nach dem Login kopieren

你会发现使用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>

Nach dem Login kopieren

修改数据,页面数据会更新,但是源数据不会同步,修改,并无引用关系,ref相当于是对源对象重新拷贝一份数据 ref()接收到的是一个纯数值

toRefs()函数

toRef()只能处理源对象指定的某个属性,如果源对象属性很多,一个一个的使用toRef()处理会显得比较麻烦

那么这个toRefs()就很有用了,它与toRef()的功能一致,可以批量创建多个ref对象,并且能与源对象保持同步,有引用关系

语法:toRefs(源对象),toRefs(person)

如上面的示例代码,修改为toRefs()所示

<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>

Nach dem Login kopieren

当从组合式函数中返回响应式对象时，toRefs 是很有用的。使用它，消费者组件可以解构/展开返回的对象而不会失去响应性

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

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

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

Nach dem Login kopieren

注意事项

toRefs 在调用时只会为源对象上可以枚举的属性创建 ref。如果要为可能还不存在的属性创建 ref，则改用 toRef

为啥需要toRef()与toRefs()函数

目的：在保证不丢失响应式的前提下，把对象进行解构，方便对象数据分解和扩散

前提：针对的是响应式对象（reactive封装的）非普通对象

注意：不创造响应式（那是reactive的事情),它本身只是延续响应式,让一个非响应式数据通过toRef或toRefs

Variable Daten, die nicht von der reaktionsfähigen API gepackt und verarbeitet werden, verfügen nicht über reaktionsfähige Funktionen. Das heißt, die Daten werden häufig in der Logik geändert, die Seite wird jedoch nicht aktualisiert Um nicht reagierende Daten in reaktionsfähige Daten umzuwandeln, müssen Sie die beiden componsition API verwenden, toRef() und toRefs()🎜 🎜Um es einfach zu machen Schauen Sie sich Konzepte an, sie sind oft abstrakt und schwer zu verstehen. Wir müssen immer noch von konkreten Beispielen ausgehen🎜

toRef()-Funktion

🎜Funktion: Erstellen Sie ein ref-Objekt, dessen value-Wert auf einen bestimmten Attributwert in einem anderen Objekt verweist und mit dem ursprünglichen Objekt verknüpft ist. [Verwandte Empfehlungen: vuejs Video-Tutorial, Web-Frontend-Entwicklung]🎜🎜Das heißt, basierend auf einem Attribut des responsiven Objekts Erstellen Sie einen entsprechenden ref. Der auf diese Weise erstellte ref wird mit seinem Quellattribut synchronisiert und weist eine Referenzbeziehung zum Quellobjekt auf. 🎜🎜Ändern des Werts der Quelle Das Attribut aktualisiert den Wert von ref🎜🎜Syntax: const Variablenname = toRef (Quellobjekt, ein Attribut unter dem Quellobjekt )🎜 🎜Zum Beispiel: const name = toRef(person,'name')🎜🎜Anwendung: Wenn Sie ein bestimmtes Attribut in der Antwort bereitstellen möchten Wenn Sie ein Objekt separat für die externe Verwendung verwenden möchten, möchten Sie nicht die Reaktivität verlieren. Die Übergabe eines ref eines prop an eine zusammengesetzte Funktion kann ebenfalls nützlich sein🎜🎜Nachteile: toRef() kann nur ein Attribut verarbeiten, aber toRefs(source object) kann in Stapeln gleichzeitig verarbeitet werden🎜rrreee🎜Dann, wenn Sie Daten rendern möchten In der Vorlage können Sie so schreiben🎜rrreee🎜Wenn Sie nicht möchten, dass die Schrift in der Vorlage so lang ist, können Sie sie zuerst dekonstruieren, wie unten gezeigt🎜rrreee🎜 Dann können Sie in der Vorlage Verwenden Sie Variablen direkt, wie unten gezeigt🎜rrreee🎜Wenn wir nun die variablen Daten ändern möchten, werden wir feststellen, dass die Logik Die Daten in werden geändert, aber die Daten auf der Seite werden nicht aktualisiert, dh die Reaktionsfähigkeit geht verloren. Beispiel: Ändern Sie in der folgenden Vorlage die Namens- und Altersattribute bzw Daten müssen Sie die Funktion toRef (Quellobjekt, unter dem Quellobjekt angegebenes Attribut) ausleihen, wie unten gezeigt 🎜rrreee🎜 in der Vorlage, immer noch wie oben gezeigt🎜rrreee🎜Das finden Sie später Mit der Funktion toRef() können die nicht reagierenden Daten zu reaktionsfähigen Daten werden, und die Quelldaten werden ebenfalls synchronisiert🎜🎜Wenn es nur für die Anzeige reiner Datenseiten verwendet wird. Es besteht keine Notwendigkeit, die Daten in reaktionsfähige Daten umzuwandeln. Wenn Sie die Daten ändern müssen, müssen Sie die nicht reaktionsfähigen Daten über toRef() Die 🎜Die Implementierung der Funktion unterscheidet sich von der von ref🎜Wenn Sie ref zum Verarbeiten von Daten verwenden, wie unten gezeigt, verwenden Sie ref Verarbeitet Daten, und die Seite kann auch reaktionsfähige und aktualisierte Daten implementieren, unterscheidet sich jedoch von toRef. Es gibt einen Unterschied: Ändern Sie die Daten, und die Seitendaten werden aktualisiert, aber die Quelle Daten werden nicht synchronisiert, geändert und haben keine Referenzbeziehung. ref entspricht einer neuen Kopie des Quellobjekts. ref() erhält einen reinen Wert🎜toRefs()-Funktion🎜toRef() kann nur ein bestimmtes Attribut verarbeiten, das durch das Quellobjekt angegeben wird. Wenn das Quellobjekt viele Attribute hat, eines um eins Es wird schwieriger sein, toRef() zum Verarbeiten zu verwenden. Dann ist dieses toRefs() sehr nützlich. Es hat die gleiche Funktion wie toRef(). , mehrere ref-Objekte können in Stapeln erstellt und mit dem Quellobjekt synchronisiert werden und eine Referenzbeziehung haben🎜🎜Syntax: toRefs ( Quellobjekt) ,toRefs(person)🎜🎜Ändern Sie es wie im obigen Beispielcode gezeigt in toRefs()🎜rrreee🎜Bei der Rückgabe eines reaktionsfähigen Objekts aus einer kombinierten Funktion ist toRefs nützlich. Auf diese Weise kann die Verbraucherkomponente das zurückgegebene Objekt zerstören/erweitern, ohne die Reaktionsfähigkeit zu verlieren🎜rrreee🎜Hinweise🎜🎜toRefs wird nur für aufzählbare Eigenschaften auf dem Quellobjekt erstellt, wenn refaufgerufen wird >. Wenn Sie einen ref für eine Eigenschaft erstellen möchten, die möglicherweise noch nicht existiert, verwenden Sie stattdessen toRef 🎜
Warum brauchen Sie Funktion toRef() und toRefs()
🎜Zweck: Das Objekt ohne Verlust der Reaktionsfähigkeit dekonstruieren, um die Zerlegung und Verbreitung von Objektdaten zu erleichtern🎜🎜Prämisse: Es richtet sich an reaktive Objekte (gekapselt durch reactive) und nicht-gewöhnliche Objekte🎜🎜Hinweis: Erstellen Sie keine reaktiven Objekte (das ist eine Frage von reactive code>) setzt es selbst lediglich die Reaktionsfähigkeit fort und ermöglicht die Umwandlung nicht reagierender Daten in reaktionsfähige Daten über <code>toRef oder toRefs🎜
Zusammenfassung

Dieser toRef() und toRefs() sind sehr praktisch. Sie wandeln beide nicht reagierende Daten in reaktionsfähige Daten um, die mit den Quellobjekten übereinstimmen können Ersteres unterstützt nur die Verarbeitung einzelner Attributdaten, während letzteres die Stapelverarbeitung von Daten unterstützt. Wenn die Daten geändert werden, werden diese beiden Zusammensetzungs-API Funktionen sind sehr praktisch. Wenn es darum geht, die Daten auf der Seite zu ändern, werden sie verwendet

Das obige ist der detaillierte Inhalt vonVue3-Responsive-Funktionsvergleich: toRef() vs toRefs(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!