[Vue3 Knowledge Lecture 7] Application et comparaison de méthodes réactives, peu profondes, toRef, toRefs et d'autres séries de méthodes

Annuaire d'articles

Un, réactif()

La fonction reactive() est utilisée pour renvoyer un proxy réactif pour un objet . Les similitudes et différences avec la fonction ref() pour définir des données réactives sont les suivantes :

Plateforme de gestion numérique
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
système d'autorisation-
Adresse du blog personnel du centre commercial

La fonction ref et la fonction réactive sont utilisées pour définir des données réactives.
La fonction ref est plus adaptée pour définir des types de données de base (peut recevoir des types de données et des objets de base)
- Les paramètres de fonction peuvent être des types de données de base ou peuvent également accepter des types d'objet
- Si le paramètre est un type d'objet, la nature sous-jacente est en réalité réactive et le système convertira automatiquement la valeur transmise dans ref
```
ref(1) -> reactive({value:1})
// ref函数只能操作浅层次的数据，把基本数据类型当作自己的属性值；深层次依赖于reactive
```
- Accédez-y dans le modèle et le système l'ajoutera automatiquement .value. .valueBesoin d' accéder manuellement en js
```
import { ref } from 'vue'

// 为基本数据类型添加响应式状态
const name = ref('Neo')

// 为复杂数据类型添加响应式状态
const state = ref({
  count: 0
})

// 打印name的值
console.log(name.value)
// 打印count的值
console.log(state.value.count)
```
- Le principe de réactivité de la réf dépend Object.defineProperty()de get()etset()

La fonction réactive est plus adaptée à la définition de types de données complexes (json/arr/obj/map/set)

Sa réactivité est plus "profonde" (elle affectera toutes les propriétés imbriquées à l'intérieur de l'objet et toutes les données sont réactives). L'essence sous-jacente est d'envelopper les données entrantes dans un proxy JavaScript, et son comportement est similaire à celui des objets généraux. similaire. La différence est que Vue peut suivre l'accès et les modifications apportées aux propriétés des objets réactifs. Il n'est donc pas égal à l'objet source, il est recommandé de n'utiliser que des proxys réactifs et d'éviter d'utiliser l'objet d'origine.
```
import { reactive } from 'vue'

let list = reactive([])
const addData = () => {
	setTimeout(() => {
		let arr = ['banana','orange','peal']
		list.push(...arr)
		console.log(list)
	},1000)
}
```

Le paramètre doit être un objet ou un tableau. Il est plus difficile de rendre un élément de l'objet réactif. Besoin d'utiliser le traitement de la fonction toRefs

import { reactive, toRefs } from 'vue'

// 通过 reactive 定义响应式数据
const state = reactive({
    // 定义每一个表单控件的配置项：type类型、label文本、prop绑定字段 等信息
    items: [{
        label: "用户名",
        prop: "name",
        inputwidth: "100%",
    }, {
        password: true,
        label: "密码",
        prop: "pwd",
        inputwidth: "100%",
        rules: [{ required: true, message: "请输入密码", trigger: 'blur' }]
    }, {
        label: "手机号",
        prop: "phone",
        inputwidth: "100%",
        required: true,
        validateType: "phone"
    }],
    // 定义每一个表单绑定字段对应的信息（form表单数据信息）
    formData: {
        name: "",
        pwd: "",
        phone: ""
    },
    // form 元素配置信息
    options: {
        size: "small",
        formWidth: "35%",//表单占父元素的宽度
        labelWidth: "80px",//标签的长度
    },
})

// 通过 toRefs 获取 reactive 中的每一项属性的引用（js中调用使用 .value，template 中直接使用自动解析）
const { items, formData, options } = toRefs(state);

console.log(items,options)

Lorsque vous obtenez la valeur des données, obtenez-la directement sans ajouter .value.

import { reactive } from 'vue'

// 响应式状态
const state = reactive({
  count: 0
})

// 打印count的值
console.log(state.count)

2. lecture seule()

La fonction readonly() accepte un objet (qu'il soit réactif ou ordinaire) ou une référence et renvoie un proxy en lecture seule avec la valeur d'origine. Il ne peut pas modifier la valeur lui-même, mais est affecté par les modifications apportées à l'objet d'origine.

import { readonly } from "vue"

let obj = reactive({name:"Jack"})

let readObj = readonly(obj)

const change = () => {
	// 不能直接修改只读属性
	// readObj.name = "Lucy";
	
	// 受原始对象改变的影响
	obj.name = "David";
	console.log(obj,readObj);
}

Les proxys en lecture seule sont approfondis : l'accès à toutes les propriétés imbriquées sera en lecture seule. Son comportement de décompression de référence est reactive()le même que celui de , mais la valeur déballée est en lecture seule.

3. peu profondReactive()

reactive()forme d'action superficielle. Contrairement à reactive(), il n'y a pas de transformation de niveau profond : seules les propriétés de niveau racine d'un objet réactif superficiel sont réactives. La valeur de la propriété sera stockée et exposée telle quelle, ce qui signifie également que les propriétés avec une valeur ref ne seront pas automatiquement déballées.

import { reactive,shallowReactive } from "vue";

const stu = reactive({name:"Jack"})

const obj = shallowReactive({
	foo:{
		bar:{
			num:1
		}
	}
})

const change = () => {
	// reactive() 作用是深层次的，和shallowReactive() 一起使用时，会影响其数据变化
	stu.name = "David"
	// shallowReactive() 作用是浅层的，只能修改第一层的数据。深层次数据无法修改。但是会受reactive数据修改的影响。
	obj.foo.bar.num = 1000;
	console.log(obj)
}

Par exempleshallowReadonly()

readonly()forme d'action superficielle. Contrairement à readonly(), il n'y a pas de transformation profonde : seules les propriétés au niveau racine deviennent en lecture seule. La valeur de l'attribut sera stockée et exposée telle quelle, ce qui signifie également que les attributs avec une valeur ref ne seront pas automatiquement déballés. Également affecté par les modifications apportées aux données de l'objet d'origine.

const state = shallowReadonly({
  foo: 1,
  nested: {
    bar: 2
  }
})

// 更改状态自身的属性会失败
state.foo++

// ...但可以更改下层嵌套对象
isReadonly(state.nested) // false

// 这是可以通过的
state.nested.bar++

5. isReactive() et isReadonly()

La fonction isReactive() vérifie si un objet est un proxy créé par reactive()ou .shallowReactive()
La fonction isReadonly() vérifie si la valeur transmise est un objet en lecture seule. Les propriétés des objets en lecture seule peuvent être modifiées, mais elles ne peuvent pas être directement affectées par l'objet transmis.

Plateforme de gestion numérique
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
système d'autorisation-
Adresse du blog personnel du centre commercial

6. toRef()

La fonction toRef() crée une référence correspondante basée sur une propriété de l'objet réactif. Une référence créée de cette manière est synchronisée avec sa propriété source : changer la valeur de la propriété source mettra à jour la valeur de la référence, et vice versa.

La fonction toRef() ne peut définir qu'une seule donnée à la fois et reçoit deux paramètres. Le premier paramètre est quel objet et le deuxième paramètre est quel attribut de l'objet.

<script setup>
    const state = reactive({
        title: '标题',
        name: 'wff'
    })
    
    const name = toRef(state, 'name')

    console.log(state.name)
    console.log(name.value)
</script>

<template>
  <div>
    name:{
   
   {name}}
  </div>
</template>

7. toRefs()

La fonction toRefs() convertit un objet réactif en objet normal. Chaque propriété de cet objet normal est une référence pointant vers la propriété correspondante de l'objet source.

<script setup>
    const state = reactive({
        title: '标题',
        name: 'wff'
    })
    
    const { title } = toRefs(state)

    console.log(state.title)
    console.log(title.value)
</script>

<template>
  <div>
    title:{
   
   {title}}
  </div>
</template>

Remarque : Nous utilisons reactivel'objet créé. Si nous voulons l'utiliser dans le modèle, nous devons utiliser xxx.xxxle formulaire ; c'est toujours très gênant s'il est utilisé en grande quantité, mais es6après avoir utilisé la déstructuration, la réactivité sera perdue. Ensuite, toRefsl'effet se reflète ici. Vous pouvez l'utiliser pour convertir toutes les propriétés originales d' toRefsun objet réactif en propriétés reactiveréactivesref .

8. toRaw()

La fonction toRaw() peut renvoyer l'objet original correspondant au proxy créé par reactive(), readonly(), shallowReactive()ou (convertir l'objet réactif en objet normal).shallowReadonly()

Il s'agit d'une méthode spéciale qui peut être utilisée pour des lectures temporaires sans entraîner de surcharge d'accès/de suivi du courtier, ou pour des écritures sans déclencher de modifications. Il n'est pas recommandé d'enregistrer une référence persistante à l'objet d'origine, utilisez-la donc avec prudence.

const foo = {}
const reactiveFoo = reactive(foo)

console.log(toRaw(reactiveFoo) === foo) // true

Neuf, ref, toRef, toRefs similitudes et différences

Les fonctions ref, toRef et toRefs peuvent toutes transformer les attributs d'un objet en données réactives.
L'essence de la fonction ref est la copie. La modification des données réactives n'affectera pas les données d'origine (le type de données de référence aura un impact) et la vue sera mise à jour.
Les fonctions toRef et toRefs forment une relation de référence avec les données entrantes. La modification de toRef affectera ces données, mais la vue ne sera pas mise à jour.

Fonction : Convertit un objet responsive en un objet normal. Chaque propriété de l'objet normal est uneref
- La fonction toRef ne peut définir qu'une seule donnée à la fois et reçoit deux paramètres. Le premier paramètre est quel objet et le deuxième paramètre est quel attribut de l'objet.
- La fonction toRefs reçoit un objet en paramètre, elle va parcourir toutes les propriétés de l'objet, puis appeler toRef une par une. Utilisé pour définir par lots plusieurs données comme réactives
les données ref provoqueront un comportement d'écoute, mais pas toRef