Comparaison des fonctions réactives Vue3 : toRef() vs toRefs()

ref est une fonction API réactive qui gère les types de données de base. Les variables déclarées dans setup peuvent être utilisées directement dans les modèles 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>

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

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

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

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

如果想要修改数据,支持响应式,将一个非响应式数据,变成一个响应式数据,需要借用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>

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

{{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对象,并且能与源对象保持同步,有引用关系

语法: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>

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

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

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

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

注意事项

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

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

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

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

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

Variable. les données qui ne sont pas empaquetées et traitées par l'API réactive n'ont pas de capacités réactives🎜🎜C'est-à-dire que les données sont souvent modifiées dans la logique, mais la page ne sera pas mise à jour, alors comment ajouter un Pour transformer des données non réactives en données réactives, vous devez utiliser les deux API de composition, toRef() et toRefs()🎜 🎜Pour regardez simplement les concepts, ils sont souvent abstraits et difficiles à comprendre. Il faut quand même partir d'exemples précis🎜

fonction toRef()

🎜Fonction : Créez un objet ref dont la valeur value pointe vers une certaine valeur d'attribut dans un autre objet et est associée à l'objet d'origine. [Recommandations associées : tutoriel vidéo vuejs, développement web front-end]🎜🎜C'est-à-dire basé sur un attribut sur l'objet réactif , créez un ref correspondant, le ref ainsi créé est synchronisé avec son attribut source, et a une relation de référence avec l'objet source🎜🎜Changement de la valeur de la source l'attribut mettra à jour La valeur de ref🎜🎜Syntaxe : const Nom de la variable = toRef (objet source, un attribut sous l'objet source )🎜 🎜Par exemple : const name = toRef(person,'name')🎜🎜Application : Lorsque vous souhaitez fournir un certain attribut dans le responsive objet à usage externe séparément, vous ne voulez pas perdre de réactivité, passer une ref d'un prop à une fonction composée peut également être utile🎜🎜Inconvénients : toRef() ne peut traiter qu'un seul attribut, mais toRefs(source object) peut être traité par lots à la fois🎜rrreee🎜Ensuite, si vous souhaitez restituer les données dans le modèle, vous pouvez écrire comme ceci🎜rrreee🎜Si vous ne voulez pas Dans le modèle, si l'écriture est si longue, alors vous pouvez d'abord la déconstruire, comme indiqué ci-dessous🎜rrreee🎜 Ensuite, dans le modèle, vous pouvez utilisez directement les variables, comme indiqué ci-dessous🎜rrreee🎜Maintenant, si nous voulons modifier les données variables, nous constaterons que la logique Les données dedans seront modifiées, mais les données de la page ne seront pas mises à jour, c'est-à-dire la réactivité est perdu. Par exemple : dans le modèle suivant, modifiez respectivement les attributs name et age🎜rrreee🎜 Puis dans le code logique🎜rrreee🎜Si vous souhaitez modifier les données, Pour prendre en charge la réactivité, pour transformer une donnée non réactive en réactive. données, vous devez emprunter la fonction toRef (objet source, attribut spécifié sous l'objet source), comme indiqué ci-dessous 🎜rrreee🎜 dans le modèle, toujours comme indiqué ci-dessus🎜rrreee🎜Vous constaterez qu'après en utilisant la fonction toRef(), les données non réactives ont la capacité d'être des données réactives, et les données sources seront également synchronisées🎜🎜Si elles ne sont utilisées que pour l'affichage de pages de données pures. Il n'est pas nécessaire de convertir les données en données réactives. Si vous devez modifier les données, vous devez convertir les données non réactives en données réactives via toRef() L'implémentation de la fonction 🎜

est différent de celui de ref

🎜Si vous utilisez ref pour traiter les données, comme indiqué ci-dessous, utilisez ref traite les données , et la page peut également implémenter des données réactives et mises à jour, mais c'est différent de toRef Il y a une différence🎜rrreee🎜Modifiez les données, et les données de la page seront mises à jour, mais les données sources le seront. ne peut pas être synchronisé, modifié et n'a aucune relation de référence. ref équivaut à une nouvelle copie de l'objet source ref() reçoit une valeur pure🎜

toRefs()

🎜toRef() ne peut traiter qu'un certain attribut spécifié par l'objet source si l'objet source a plusieurs attributs, un par un. Il sera plus difficile d'utiliser toRef() pour traiter. Alors ce toRefs() est très utile. Il a la même fonction que toRef()code> , plusieurs objets <code>ref peuvent être créés par lots, et peuvent être synchronisés avec l'objet source et avoir une relation de référence🎜🎜Syntaxe : toRefs (objet source ) ,toRefs(person)🎜🎜Comme indiqué dans l'exemple de code ci-dessus, modifiez-le en toRefs()🎜rrreee🎜Lors du retour d'un objet réactif à partir d'un fonction combinée, toRefs est utile. Grâce à cela, le composant consommateur peut déstructurer/étendre l'objet renvoyé sans perdre en réactivité🎜rrreee🎜Notes🎜🎜toRefs ne sera créé que pour les propriétés énumérables de l'objet source lorsqu'il est appeléref. Si vous souhaitez créer un ref pour une propriété qui n'existe peut-être pas encore, utilisez plutôt toRef 🎜

Pourquoi avez-vous besoin Fonctions toRef() et toRefs()

🎜Objectif : Déconstruire l'objet sans perdre la réactivité pour faciliter la décomposition et la diffusion des données de l'objet🎜🎜Prémisse : Il s'adresse aux objets réactifs (encapsulés par reactive) et aux objets non ordinaires🎜🎜Remarque : Ne créez pas d'objets réactifs (c'est une question de réactif code>), il continue lui-même la réactivité, permettant aux données non réactives d'être converties en données réactives via <code>toRef ou toRefs🎜

Résumé

Ce toRef() et toRefs() sont très pratiques. Ils transforment tous deux une donnée non réactive en une donnée réactive capable d'interagir avec les objets source. peut garder les données synchronisées et avoir des relations de référence.Le premier ne prend en charge que le traitement des données d'attribut unique, tandis que le second prend en charge le traitement par lots des données. Lorsque les données sont modifiées, les données de la page sont mises à jour. /code> Les fonctions sont très pratiques dans le développement commercial réel, s'il s'agit de modifier les données de la page, alors elles seront utiliséestoRef()与toRefs()是非常实用的,都是将一个非响应式数据变为一个具备响应式数据能力,与源对象可保持数据的同步,具备引用关系,前者只支持单个属性数据的处理,而后者支持数据的批量处理

修改数据时,页面数据会更新,这两个composition API

(Partage vidéo d'apprentissage :

Tutoriel d'introduction à vuejs, Vidéo de programmation de base)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!