Résumé Vue crée des objets de données réactifs (réactif, ref, toRef, toRefs)

1. réactif

La méthode réactive crée et renvoie un objet profondément réactif (objet proxy) basé sur l'objet entrant. reactive方法根据传入的对象，创建返回一个深度响应式对象（Proxy代理对象）。

reactive 会对传入对象进行包裹，创建一个该对象的
Proxy代理对象。它是源对象的响应式副本，不等于原始对象。它==“深层”==转换了源对象的所有嵌套property（属性）
，解包并维持其中的任何ref引用关系。

响应式对象属性值改动，不管层级有多深，都会触发响应式。新增和删除属性也会触发响应式。

二、ref

ref 函数用来将一项数据包装成一个响应式 ref 对象。它接收任意数据类型的参数，作为这个 ref 对象 内部的 value property 的值。

• 生成值类型数据（String，Number，Boolean，Symbol）的响应式对象

• 可以用ref对象.value访问或更改这个值。

• 生成对象和数组类型的响应式对象 （对象和数组一般不选用ref方式，而选用reactive方式，比较便捷）

三、reactive对比ref

• 从定义数据角度对比：

  • ref用来定义：任意数据类型

  • reactive用来定义：对象（或数组）类型数据

如何选择 ref 和 reactive？建议：

• 基础类型值(String，Number，Boolean，Symbol) 或单值对象(类似{ count: 1 }这样只有一个属性值的对象) 使用 ref

• 引用类型值(Object、Array)使用 reactive

• 从原理角度对比：

  • ref通过Object.defineProperty()的get和set来实现响应式（数据劫持）。

  • reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据

• 从使用角度对比：

  • ref定义的数据：访问或更改数据需要.value
  • reactive定义的数据：操作数据与读取数据均不需要.value。

四、toRef

• 针对一个响应式对象（reactive封装）的prop（属性）创建一个ref，且保持响应式

• 两者保持引用关系

语法：const 属性名= toRef(对象,'属性名')

五、toRefs

toRefs 是一种用于破坏响应式对象并将其所有属性转换为 ref 的实用方法

• 将响应式对象（reactive封装）转成普通对象

• 对象的每个属性(Prop)都是对应的ref

• 两者保持引用关系

语法：const 属性名= toRefs(对象,'属性名')

注意：reactive封装的响应式对象，不要直接通过解构的方式return，这是不具有响应式的。

可以通过 toRefs 处理，然后再解构返回，这样才具有响应式

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

六、一些问题

为什么有了reactive函数还需要ref函数呢？

当我们只想让某个变量实现响应式的时候，采用reactive就会比较麻烦，因此vue3提供了ref方法进行简单值的监听，但并不是说ref只能传入简单值，他的底层是reactive，所以reactive有的，它都有。

记住：ref本质也是reactive，ref(obj)等价于reactive({value: obj})

reactive encapsulera l'objet entrant et créera un
Objet proxy proxy de l'objet. Il s'agit d'une copie réactive de l'objet source et n'est pas égal à l'objet original. It == "profondément" == convertit toutes les propriétés imbriquées de l'objet source, en décompressant et en conservant toutes les références de référence qu'elles contiennent.

• Générer des données de type valeur (String, Number, Boolean, Symbol) Réactif objets
• Vous pouvez accéder ou modifier cette valeur en utilisant ref object.value. 🎜
• 🎜Générer des objets réactifs de types objet et tableau(Les objets et les tableaux n'utilisent généralement pas le mode ref, mais le mode réactif, qui est plus pratique)🎜
🎜3. Comparaison réactive ref🎜
• 🎜Comparaison du point de vue de la définition des données :🎜
  • 🎜ref est utilisée pour définir : tout type de données🎜
  • 🎜reactive est utilisé pour définir : Données de type objet (ou tableau)🎜

🎜Comment choisir ref et reactive ? Suggestions : 🎜

• 🎜Valeurs de type de base (Chaîne, Nombre, Booléen, Symbole) ou objets à valeur unique (similaires à { count : 1 } Les objets avec une seule valeur d'attribut) utilisent ref🎜
• 🎜Les valeurs de type référence (Objet, Tableau) utilisent réactif🎜

🎜Depuis le principe Comparaison d'angle : 🎜
• 🎜ref implémente la réactivité (détournement de données) via Object.defineProperty() et get >définir ). 🎜
• 🎜reactive implémente la réactivité (détournement de données) en utilisant Proxy et exploite l'objet source en interne via Reflect Data 🎜
• 🎜Comparaison du point de vue de l'utilisation : 🎜
  • Données définies par ref : l'accès ou la modification des données nécessite .value li>
  • Les données définies par réactif : .value ne sont pas nécessaires pour les données de fonctionnement et les données de lecture.
🎜4. toRef🎜
• 🎜Créez une référence pour la prop (propriété) d'un objet réactif (encapsulation réactive) et gardez-le réactif 🎜
• 🎜Les deux entretiennent une relation de référence🎜
🎜Syntaxe : const nom d'attribut = toRef(object,'property name')🎜🎜5. toRefs🎜🎜toRefs est une méthode pratique pour détruire des objets réactifs et convertir leurs toutes les propriétés en refs🎜
• 🎜Convertir des objets réactifs (encapsulation réactive) en objet ordinaire🎜
🎜Chaque propriété (Prop) de l'objet est une référence correspondante🎜
• 🎜Les deux entretiennent une relation de référence🎜
🎜Syntaxe : const nom d'attribut = toRefs (objet, 'nom de la propriété')🎜🎜Remarque : Les objets réactifs encapsulés réactifs ne doivent pas être renvoyés directement via la déstructuration. Ce n'est pas réactif. 🎜🎜 peut être traité via toRefs, puis déconstruit et renvoyé, de sorte qu'il soit réactif🎜rrreee🎜 6. Quelques questions🎜

🎜Pourquoi avons-nous besoin de la fonction ref alors que nous avons une fonction réactive ? 🎜

🎜Lorsque nous voulons simplement qu'une certaine variable soit réactive, il sera plus difficile d'utiliser réactif, donc vue3 fournit la méthode ref pour surveiller des valeurs simples, mais cela ne signifie pas que ref ne peut transmettre que des valeurs simples , sa couche inférieure est réactive, elle a donc tout ce qui est réactif. 🎜🎜Rappelez-vous : ref est également de nature réactive, ref(obj) est équivalent à reactive({value: obj})🎜🎜🎜🎜🎜🎜🎜🎜【Recommandation associée : 🎜vue.js vidéo tutoriel 🎜】🎜

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!