Répertoire des articles de la série
| contenu | Lien |
|---|---|
| De Vue2 à Vue3 [zéro] | Présentation de Vue3 |
| De Vue2 à Vue3 [1] | API de composition (chapitre 1) |
| De Vue2 à Vue3 [2] | API de composition (chapitre 2) |
| De Vue2 à Vue3 [3] | API de composition (chapitre 3) |
| De Vue2 à Vue3 [4] | API de composition (chapitre 4) |
Annuaire d'articles
avant-propos
Avec la sortie de Vue 3, nous avons inauguré une API de composition puissante et passionnante, qui apporte plus de flexibilité et de maintenabilité aux développeurs . L'API de composition de Vue 3 a non seulement changé la façon dont nous écrivons les composants Vue, mais a également introduit de nouveaux composants et quelques changements mineurs mais pratiques . Dans cet article, nous allons creuser dans l'API de composition de Vue 3 et introduire quelques nouveaux composants et changements frappants . Commençons ensemble ce passionnant voyage d'apprentissage !
1. peu profondeRéactive et peu profondeRef
-
peu profondRéactif：
- La fonction shallowReactive est utilisée pour créer un objet réactif peu profond , qui n'effectuera un traitement réactif que sur les propriétés de premier niveau de l'objet et n'effectuera pas de manière récursive un traitement réactif de niveau profond sur les propriétés imbriquées.
- Cela peut améliorer les performances et réduire la consommation de mémoire dans certains cas , en particulier lorsque les niveaux d'imbrication des objets sont profonds ou que les objets sont très volumineux .
- Scénarios applicables : lorsque vous devez effectuer un traitement réactif sur un objet volumineux, mais que vous ne vous souciez que des modifications apportées aux propriétés de premier niveau de l'objet , vous pouvez utilisershallowReactive pour éviter un traitement réactif approfondi .
import {
shallowReactive} from 'vue'
export default {
name: 'App',
setup(){
let data = ({
name: 'John',
age: 25,
address: {
street: 'Main St',
city: 'New York'
}
})
let data1 = shallowReactive(data)
return {
data1
}
}
}
Étant donné que la fonction shallowReactive crée un objet réactif superficiel , data1.nameelle déclenchera une réponse lorsqu'elle est modifiée, mais elle ne déclenchera pas de réponse lorsqu'elle
est modifiée.data1.address.street（shallowReactive：只处理对象最外层属性的响应式）
-
peu profondeRef：
- La fonction shallowRef est utilisée pour créer une référence réactive superficielle , qui ne répond qu'au premier niveau de la valeur , et n'effectue pas de manière récursive un traitement réactif approfondi sur les valeurs imbriquées ===》
只处理基本数据类型的响应式, 不进行对象的响应式处理 - Semblable àshallowReactive, cela peut améliorer les performances et réduire la consommation de mémoire dans certains cas .
- Scénario applicable : lorsque vous devez effectuer un traitement réactif sur une valeur, mais que vous ne vous souciez que de la modification de premier niveau de la valeur , vous pouvez utilisershallowRef pour éviter un traitement réactif de niveau approfondi.
- La fonction shallowRef est utilisée pour créer une référence réactive superficielle , qui ne répond qu'au premier niveau de la valeur , et n'effectue pas de manière récursive un traitement réactif approfondi sur les valeurs imbriquées ===》
<template>
{
{name1}}
<button @click="name1 = '前端百草阁'">点我修改name</button>
<br>
{
{ data1.address.street }}
<button @click="data1.address.street = '前端百草阁'">点我修改stree</button>
</template>
<script>
import {
shallowRef} from 'vue'
export default {
name: 'App',
setup(){
let name = 'John'
let data = ({
age: 25,
address: {
street: 'Main St',
city: 'New York'
}
})
let data1 = shallowRef(data)
let name1 = shallowRef(name)
console.log(data1.value,name1.value); // 在setup中操作数据时 要加.value
return {
data1,
name1
}
}
}
</script>
Ici, mes amis, faites attention à un point. Qu'il s'agisse d'exploiter des données ou d'utiliser des données, c'est la même chose que ref et réactif. Lorsque ref exploite des données, il doit ajouter .value pour obtenir la valeur correspondante.
通过使用shallowReactive和shallowRef，可以根据具体的需求选择性地进行响应式处理，避免不必要的性能开销。在处理大型对象或嵌套层次较深的数据时，这些函数可以提供更好的性能和内存利用率。
Deux, en lecture seule et peu profond en lecture seule
- lecture seulement
- Rendre une donnée réactive en lecture seule ( deep read-only )
- Définissez l'objet entier et ses propriétés imbriquées en lecture seule pour protéger certaines données contre la modification .
<script>
import {
ref, reactive, toRefs,readonly } from "vue";
export default {
name: "deMO",
setup() {
//数据
let sum = ref(0);
let person = reactive({
name: "张三",
age: 18,
job: {
j1: {
salary: 20,
},
},
});
person = readonly(person);
sum = readonly(sum)
return {
sum,
...toRefs(person),
};
},
};
</script>
由于这里使用的是readonly深只读，所以sum以及person的每一个属性都无法被修改
- peu profondeLecture seule
- Rendre une donnée réactive en lecture seule ( lecture seule peu profonde )
- Définir la propriété de premier niveau des données d'objet en lecture seule
<script>
import {
ref, reactive, toRefs,shallowReadonly } from "vue";
export default {
name: "deMO",
setup() {
//数据
let sum = ref(0);
let person = reactive({
name: "张三",
age: 18,
job: {
j1: {
salary: 20,
},
},
});
person = shallowReadonly(person)
sum = shallowReadonly(sum)
return {
sum,
...toRefs(person),
};
},
};
</script>
由于person设置了浅只读，所以person中的name属性值不能改变，但是person中的j1里的属性是可以修改的
- S'il y a un objet data, la structure est relativement profonde, mais seul l'attribut externe change ===>shallowReactive.
- S'il existe des données d'objet, les fonctions suivantes ne modifieront pas les propriétés de cet objet ===> shallowRef.
通过使用readonly和shallowReadonly，我们可以根据具体的需求选择性地进行保护数据的可写性，从而提高代码的可靠性和安全性。
Notez ici s'il s'agit d'une lecture seule profonde ou d'une lecture seule superficielle
都不会影响到原先的响应式数据, il est donc préférable d'utiliser les données en lecture seule renvoyées par la méthode pour écraser les données réactives précédentes, ce qui est plus sécurisé
. Après l'opération en lecture seule, les données réactives d'origine ne changeront pas, et lorsque vous modifiez à nouveau les données réactives, les données en lecture seule changeront en conséquence
Par exemple, veuillez prêter attention à
setup() {
let car = reactive({
name: "奔驰", price: "40W" });
let car1 = readonly(car)
car.name = '宝马'
// car1.name = '劳斯莱斯' car1的值为只读不能修改
console.log(car1,car);
return {
};
},
};
Ici, car1 est la donnée en lecture seule de car. Lorsque la valeur de car change, la valeur de car1 change également en conséquence, mais la valeur de car1 ne peut pas être directement modifiée. La modification directe de la valeur de car1 ne fonctionnera pas et une erreur sera signalée
.
3. toRaw et marqueRaw
-
fonction toRaw :
- Fonction : convertir un objet responsive
reactivegénéré par le - Scénario d'utilisation : Il est utilisé pour lire l'objet commun correspondant à l'objet responsive. Toutes les opérations sur cet objet commun ne provoqueront pas de mises à jour de la page .
- Fonction : convertir un objet responsive
<script>
import {
ref,reactive,toRaw} from 'vue'
export default {
name: 'Demo',
setup(){
//数据
let person1 = ref({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
const p = toRaw(person) // person是reactive生成的响应式对象
p.age++ // 普通对象的值可以改变 但是不再引起页面更新
console.log(p) // 转换完后的p就是一个普通对象
const p1 = toRaw(person1.value)
p1.age++
console.log(p) // 转换完后的p就是一个普通对象
return {
sum,
person
}
}
}
</script>
Ici, faites attention à la raison pour laquelle l'auteur écrit deux personnes, cela ne veut-il pas dire que la fonction de toRaw est de convertir un objet responsive généré par reactive en un objet normal ?
Pourquoi y a-t-il un objet réactif généré par ref ici ?
Cela doit examiner l'essence du problème. ref définit un objet réactif en interne pour help , donc person1.value est en fait un objet Proxy , donc lors de sa conversion en un objet normal, vous deveztoRaw(person1.value)
Faites attention à une autre question. Avez-vous des questions ? J'ai converti la personne en un objet ordinaire et j'ai utilisé un p pour recevoir l'objet converti. La personne elle-même change-t-elle ?
La vraie connaissance ne peut être obtenue que par l'expérimentation. Tout le monde fait des progrès continus à cause de la curiosité . Après avoir expérimenté, j'ai trouvé qu'il 响应式对象转换为普通对象时，并不会影响先前的响应式对象，换句话说就是person依然是响应式对象，修改它，页面依旧会发生变化
y avait encore un point
setup() {
let car = reactive({
name: "奔驰", price: "40W" });
let car2 = toRaw(car)
// car.name = '宝马'
car2.name = '劳斯莱斯'
console.log(car,car2);
}
La modification de la voiture changera la valeur de la voiture, la modification de la valeur de la voiture2 changera également la valeur de la voiture
- marqueRaw：
- Fonction : Marquer un objet pour le rendre
永远不会再成为响应式对象. - Scénario d'application :
- Certaines valeurs ne doivent pas être définies comme réactives, telles que les bibliothèques tierces complexes, etc.
- Ignorer les transformations réactives peut améliorer les performances lors du rendu de listes volumineuses avec des sources de données immuables.
Le suivi et la mise à jour réactifs est une opération relativement coûteuse. La définition d'une bibliothèque de classes tierces complexes ou d'un objet volumineux comme réactif entraînera la nécessité de parcourir en profondeur l'objet et de déclencher la mise à jour à chaque mise à jour, ce qui aura un certain impact sur les performances. Si ces valeurs n'ont pas besoin d'être affichées dans la vue ou de participer à des calculs réactifs, les définir comme non réactifs peut améliorer les performances.
- Fonction : Marquer un objet pour le rendre
<script>
<script>
import {
ref, reactive, toRefs, markRaw } from "vue";
export default {
name: "deMo",
setup() {
let person = reactive({
name: "张三",
age: 18,
job: {
j1: {
salary: 20,
},
},
});
let car = {
name: "奔驰", price: 40 };
person.car = markRaw(car); // 将一个标记过的对象添加到person的属性中
person.car.price++; // 数据会变化 但是页面不再更新（没有响应式）
console.log(person.car.price);
return {
person,
...toRefs(person), // 普通对象被标记过后 再也无法变成响应式的
};
},
};
</script>
Notez ici que si la personne est déjà un objet responsive, ajoutez-lui un attribut commun dans le temps, et cet attribut a aussi un responsive object
let car = {
name: "奔驰", price: 40 };
person.car = car; // 将一个普通对象添加到person的属性中
person.car.price++; // 数据会变化 页面会更新（有响应式）
console.log(person.car.price);
通过使用toRaw和markRaw，我们可以有更灵活的控制对象的响应式特性。toRaw使我们能够获取响应式对象的非响应式原始值。markRaw则可以将对象标记为非响应式，避免不必要的响应式追踪和更新。这些工具在一些特定场景下提供了更好的性能和控制的选择。
Résumer
Cet article explique l'utilisation et les précautions deshallowReactive etshowRef , readonly etshowepReadonly , toRaw et markRaw dans l'API combinée vue3. Bienvenue pour vous abonner à cette série d'articles, pleine de produits secs !