Un article pour parler de ref, toRef, toRefs dans vue3

Cet article vous donnera une discussion approfondie sur l'utilisation de ref, toRef et toRefs dans le projet vue3. J'espère qu'il sera utile à tout le monde !

1. La fonction ref

ref peut envelopper des types de données simples dans des données réactives (des types complexes peuvent également être utilisés). Notez que lorsque vous utilisez des valeurs dans JS, vous devez ajouter le . attribut value dans le modèle Utilisez-le simplement normalement.
Par exemple :

• ref regroupe les données de type de base
  App.vue

<template>
  <div>
      <div>{{ name }}</div>
      <button>修改数据</button>
  </div></template><script>
  import { ref } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const name = ref(&#39;初映&#39;)
          const updateName = () => {
              name.value = &#39;初映CY的前说&#39;
          }
          return { name, updateName }
      },
  }</script>

Vous pouvez voir que la méthode d'écriture est la même que reactive(), mais vous devez ajouter un .value supplémentaire lors de l'écriture en js . [Recommandations associées : tutoriel vidéo vuejs, développement web front-end]

• ref packaging des données de type de classe complexe
  Remarque : ref peut en fait envelopper des types de données complexes dans des données réactives, généralement lorsque le type de données n'est pas déterminé. Il est recommandé d'utiliser ref, comme les données renvoyées par le backend.

<template>
    <div>
        <div>{{ data?.name }}</div>
        <button>修改数据</button>
    </div></template><script>
    import { ref } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            // 初始值是 null
            const data = ref(null)
            setTimeout(() => {
                // 右边的对象可能是后端返回的
                data.value = {
                    name: &#39;初映&#39;,
                }
            }, 1000)
            const updateName = () => {
                data.value.name = &#39;CY&#39;
            }
            return { data, updateName }
        },
    }</script>

• Comment choisir ?
  ref() et reactive() sont deux API réactives fournies dans Vue.js3.0.
  ref() est principalement utilisé pour créer des données réactives. Il convertira un objet JavaScript ordinaire en un objet réactif, afin que les modifications des données puissent être suivies par l'instance Vue. Lorsque les données changent, Vue mettra automatiquement à jour les vues associées. . Les données réactives créées par ref() sont accessibles et modifiées via l'attribut .value.
  reactive() est principalement utilisé pour créer un objet réactif, qui peut être utilisé comme objet d'état contenant plusieurs valeurs, et est généralement utilisé pour gérer des états complexes. Il peut convertir un objet JavaScript ordinaire en un objet réactif et prend en charge les propriétés imbriquées. Même si les propriétés imbriquées changent, elles seront suivies par l'instance Vue. Lorsqu'une propriété de l'objet réactif change, Vue mettra automatiquement à jour la vue associée.
  Lorsqu'on sait clairement que ce qu'il faut emballer est un objet, il est recommandé d'utiliser du réactif, et dans les autres cas, d'utiliser la réf.
  Après Vue3.2, il est plus recommandé d'utiliser ref, et les performances ont été grandement améliorées.

2. Le rôle de la fonction toRef

toRef : convertir un certain attribut dans l'objet réactif en données réactives distinctes, et la valeur convertie est liée à la précédente (la fonction ref peut également être convertie , mais la valeur n'est pas liée).
Regardons d'abord l'exemple suivant :

<template>
  <div>
      <h2>name: {{ obj.name }} age: {{obj.age}}</h2>
      <button>修改数据</button>
  </div></template><script>
  import { reactive } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;初映&#39;,
              age: 18,
              address: &#39;江西&#39;,
              sex: &#39;男&#39;,
          })
          const updateName = () => {
              obj.name = &#39;初映CY的前说&#39;
          }
          return { obj, updateName }
      },
  }</script>

Écrire de cette façon peut également transformer les données en données réactives, mais cela pose deux problèmes :

• Problème 1 : Obj doit être utilisé dans le modèle pour l'obtenir. . Données, problèmes.

• Problème 2 : Bien que seuls le nom et l'âge soient utilisés dans le modèle, l'intégralité de l'objet est exportée, ce qui est inutile et constitue un gaspillage de performances.

<template>
  <div>
      <h2>name: {{ name }} </h2>
      <button>修改数据</button>
  </div></template><script>
  import { reactive,toRef  } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;初映&#39;,
              age: 18,
              address: &#39;江西&#39;,
              sex: &#39;男&#39;,
          })
          const name = toRef(obj, &#39;name&#39;)
          const updateName = () => {
              obj.name = &#39;初映CY的前说&#39;
          }
          return { name, updateName }
      },
  }</script>

De cette façon, nous pouvons renvoyer les données dont nous avons besoin, ce qui économise les performances et l'écriture dans le modèle, et ressemble un peu plus à une "importation à la demande"

3. Fonction toRefs Fonction : Convertissez toutes les propriétés de l'objet réactif en données réactives distinctes, et les valeurs converties sont liées aux précédentes.

<template>
  <div>
      <h2>{{ name }} {{ age }}</h2>
      <button>修改数据</button>
  </div></template><script>
  import { reactive, toRefs } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;初映&#39;,
              age: 10,
          })
          const updateName = () => {
              obj.name = &#39;初映CY的前说&#39;
              obj.age = 18
          }
          return { ...toRefs(obj), updateName }
      },
  }</script>

toRefs renverra toutes nos données réactives. Ensuite, utilisez simplement le nom des données directement. N'oubliez pas d'ajouter...oh

data. Sans plus tarder, apprenons à utiliser ces trois méthodes et les différences avec le réactif.

(Partage de vidéos d'apprentissage :

Tutoriel d'introduction à vuejs

,

Vidéo de programmation 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!