Dans le quatrième chapitre des vacances, j'ai l'impression que je suis encore très faible en termes de connaissances de base.
Profitant des vacances, relisez-le
1. toRef et toRefs
Créer un objet ref dont la valeur pointe vers un attribut dans un autre objet.
Syntaxe : const name = toRef(person,'name')
Application : Pour fournir séparément un attribut dans un objet réactif pour un usage externe
: Extension : toRefs a la même fonction que toRef, mais peut créer plusieurs objets ref par lots. Syntaxe : toRefs(person)
Exemple : lors de la définition de penson en tant qu'objet réactif, définissez une variable pour recevoir une certaine valeur dans l'objet,
const name1 = person.name De cette façon, name1 n'a pas de réactivité
const name2 = toRef(person,'name') This Ways name2 a de la réactivité
<template>
<div>
<h2>姓名：{
{
person.name }}</h2>
<h2>性别：{
{
person.sex }}</h2>
<h2>工作：{
{
person.job.job1.work }}</h2>
<button @click="person.name += '~'">姓名变了</button>
<br />
<button @click="person.sex += '！'">性别变了</button>
<br />
<button @click="person.job.job1.work += '还有其他工作'">工作变了</button>
</div>
</template>
<script >
import {
ref, reactive,toRef } from "vue";
export default {
name: "demo",
setup() {
let person = reactive({
name: "莲花",
sex: "男",
job: {
job1: {
work: "侦探",
},
},
});
const name1 = person.name;
console.log(name1, "name1");
const name2 = toRef(person,'name')
console.log(name2, "name2");
return {
person,
};
},
};
</script>
<style scoped></style>
Si la zone du modèle souhaite être simplifiée comme ceci
<template>
<div>
<h2>姓名：{
{
name }}</h2>
<h2>性别：{
{
sex }}</h2>
<h2>工作：{
{
work }}</h2>
<button @click="name += '~'">姓名变了</button>
<br />
<button @click="sex += '！'">性别变了</button>
<br />
<button @click="work += '还有其他工作'">工作变了</button>
</div>
</template>
<script >
Vous devez utiliser toRef
<script >
import {
ref, reactive, toRef } from "vue";
export default {
name: "demo",
setup() {
let person = reactive({
name: "莲花",
sex: "男",
job: {
job1: {
work: "侦探",
},
},
});
const name1 = person.name;
console.log(name1, "name1");
const name2 = toRef(person, "name");
console.log(name2, "name2");
return {
//toRef接收的第一个参数是对象，第二个是属性键
name: toRef(person, "name"),
sex: toRef(person, "sex"),
work: toRef(person.job.job1, "work"),
};
},
};
</script>
Il semble que l'utilisation directe de ref puisse obtenir des effets similaires, mais peut-elle être remplacée par l'écriture de ref ? La réponse est non.
Si vous remplacez la méthode d'écriture par ref, les attributs définis en personne ne seront lus que lors de l'initialisation, puis les attributs en personne seront modifiés. Ce qui est modifié, ce ne sont pas du tout les attributs définis en personne, mais les attributs nouvellement définis en retour.Attributs du package ref.
Affichez l'objet personne dans la zone du modèle, puis cliquez sur les trois boutons pour voir les résultats imprimés.
Cliquez sur les trois boutons à volonté. La page a changé, mais l'objet personne est toujours l'original. Si vous
le remplacez
par toRef, la personne l'objet changera également.
toRef ne peut traiter qu'un seul attribut à la fois, tandis que toRefs peut traiter par lots tous les attributs d'un objet
... L'opérateur d'expansion ne peut accéder qu'au premier niveau, donc pour travailler dans la zone du modèle, démarrez à partir du travail et cliquez vers le bas, travail .job1.travail
L'essence de toRef est une référence, qui maintient la relation de connexion avec l'objet source, maintient l'appel et effectue un pont. La
référence créée par toRef est une référence aux propriétés de l'objet existant. Ainsi, lorsque vous modifiez la référence renvoyée par toRef, les propriétés de l'objet d'origine sont directement modifiées.
L'essence de ref est la copie. Les attributs de l'objet sont lus et regroupés dans une nouvelle référence, qui n'est plus connectée à celle d'origine.
ref convient à la création de données réactives avec une valeur unique mutable, tandis que toRef est utilisé pour obtenir une référence à une propriété spécifique dans un objet réactif existant et prêter attention aux modifications apportées à cette propriété.