Comment utiliser ShallowRef et ShallowReactive dans Vue3

Les fonctions

shallowRef et ShallowReactive

• shallowRef traitent uniquement les données de type de base.

• shallowReactive La fonction traite uniquement la première couche de données.

• Les deux doivent être présentés lors de leur utilisation.

Vous n'avez toujours pas compris ce qui a été dit ci-dessus ? Cela n’a pas d’importance, rappelez-vous d’abord les trois points ci-dessus, puis expliquez-les en détail.

Nous avons parlé de la fonction ref et de la fonction réactive dans le blog précédent. Leur fonction est de convertir les données en données responsives. Lorsque les données sont modifiées, les données peuvent être affichées sur la page en réel. le temps. Fondamentalement, peu importe qu’il s’agisse de données ou d’objets.

Mais il y a un problème. Lorsque nous changeons les données en données réactives, que nous utilisions la fonction ref ou la fonction réactive, elles font toutes deux une surveillance approfondie. Qu'est-ce que cela signifie ? C'est l'objet enveloppé par réactif. Même s'il y a 100 couches, c'est-à-dire si vous cliquez sur une centaine d'attributs d'affilée, vous pouvez toujours surveiller les données les plus profondes. Dans ce cas, il y aura des problèmes.

Problèmes de surveillance approfondie :

• La fonction de référence et la fonction réactive sont toutes deux une surveillance approfondie.

• Si la quantité de données est trop importante, cela consommera des super performances.

• Si nous n'avons pas besoin de surveiller en profondeur les données, nous pouvons utiliser la fonction ShallowRef et la fonction ShallowReactive.

Compris ? Ce n’est pas grave si vous ne comprenez pas, nous le saurons à travers quelques cas.

Utiliser la surveillance peu profondeReactive sans profondeur

N'oubliez pas que la fonction shallowReactive ne peut traiter que la première couche de données.

Supposons que notre page dispose d'un affichage d'informations personnelles, avec le nom et l'âge qui doivent être affichés. Nos données sont stockées dans l'objet garçon, et l'âge est sous l'attribut news de l'objet garçon, qui. est profond, mais nom Sous l'objet garçon, qui est le premier calque, nous avons deux boutons pour modifier respectivement le nom et l'âge pour voir quel sera l'effet.

<template>
  <div>
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{news.age}}</h2>
    <button @click="btn">修改name</button>
    <button @click="btn2">修改age</button>
  </div>
</template>

<script>
import { shallowReactive, toRefs } from "vue";
export default {
  name: "App",
  setup() {
    const boy = shallowReactive({
      name: "我是????????.",
      news: {
        birthday: "2012-10-14",
        age: 10
      }
    });

    const btn = () => {
      boy.name = "????????.";
    };

    const btn2 = () => {
      boy.news.age++;
    };

    return { ...toRefs(boy), btn, btn2 };
  }
};
</script>

Cliquons respectivement sur deux boutons pour voir les changements de page.

Par l'effet, résumons-le un peu :

• shallowReactive ne fera que s'emballer les données de la première couche

• Par défaut, il ne peut écouter que la première couche de données.

• Si vous souhaitez modifier les données de plusieurs couches, vous devez d'abord modifier les données de la première couche, puis modifier les données des autres couches. Ce n'est qu'alors que les données de la vue changeront.

Utiliser ShallowRef pour la surveillance sans profondeur

Comme mentionné au début, la fonction shallowRef ne peut gérer que des données de type de base #🎜 🎜#, pourquoi ? Parce que la fonction ShallowRef surveille les changements de .value. Il ne s'agit pas d'un changement dans la première couche de données. Donc, si vous souhaitez modifier les données créées par ShallowRef, vous devez xxx.value = XXX.

Regardez le code :

<template>
  <div>
    <h2>姓名：{{boy}}</h2>
    <button @click="btn">修改boy</button>
  </div>
</template>

<script>
import { shallowRef } from "vue";
export default {
  name: "App",
  setup() {
    const boy = shallowRef("我是????????.");

    const btn = () => {
      boy.value = "????????.";
    };

    return { boy, btn };
  }
};
</script>

Cliquez sur le bouton pour modifier la valeur de boy.

Comme vous pouvez le voir sur la capture d'écran ci-dessus, les données peuvent être modifiées normalement.

Alors une question demeure :

shallowRef, la fonction ne gère que les données de type basique ?

Regardez le cas suivant :

<template>
  <div>
    <h2>姓名：{{boy.name}}</h2>
    <h2>年龄：{{boy.news.age}}</h2>
    <button @click="btn">修改name</button>
    <button @click="btn2">修改age</button>
  </div>
</template>

<script>
import { shallowRef } from "vue";
export default {
  name: "App",
  setup() {
    const boy = shallowRef({
      name: "我是????????.",
      news: {
        birthday: "2012-10-14",
        age: 10
      }
    });

    const btn = () => {
      boy.value.name = "????????.";
    };

    const btn2 = () => {
      boy.value.news.age++;
    };

    return { boy, btn, btn2 };
  }
};
</script>

Dans ce code, nous enveloppons un objet avec ShallowRef, puis affichons le nom et l'âge sur la page, et puis on passe Cliquez sur le bouton pour modifier le nom et l'âge et voir l'effet de la page.

Ainsi, la fonction

shallowRef ne peut gérer que les données de type 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!