Comment résoudre l'échec de la référence Vue3 pour créer des variables réactives

vue3 ref ne parvient pas à construire des variables réactives

Description du problème

Utilisez ref pour déclarer des variables réactives dans Vue3 et utilisez des fonctions pour modifier les valeurs, mais les valeurs ne peuvent pas être modifiées de manière réactive

<template>
  <p>{{userName}}</p>
  <button @click=&#39;change()&#39;>change</button>
</template>

<script>
  //引入定义响应式数据的函数
  import {reactive} from &#39;vue&#39;;
  import {ref} from "@vue/reactivity"; //!!!!!注意，这里有个坑，ref必须是引用自vue，而非@vue/reactivity
  export default {
  name: &#39;App&#39;,
  //为Vue3的新特性提供统一入口，代码都会在这个函数中添加
  //在beforecreated之前进行，因此无法访问this，亦即无法访问data和method
  setup(){
    //定义响应式数据：数据变化，模板中渲染会自动刷新
    // const obj=reactive({
    //   userName:&#39;jack&#39;,
    // });
    //只定义一个变量,可以使用ref将变量定义为响应式
    let userName=ref(&#39;jack&#39;)
    console.log(userName);
    const change=()=> {
      userName.value=&#39;rose&#39;     //注意修改的是ref对象的value属性，但是在template中使用的时候不需要再加value
      console.log(userName);
    }

    return {userName,change}
  },
}
</script>

Solution

Je ne le fais pas savoir pourquoi, lorsque la référence est

import {ref} from "@vue/reactivity"

, il n'y aura pas de réponse, mais il suffit de la changer en

import {ref} from "vue"

vue3 responsive API ref and reactive

Nous savons que la fonction ref et la fonction réactive sont utilisées pour atteindre la réactivité des données. Mais comment choisir entre ref et réactif en développement ? Parlons de la différence entre ref et réactif.

Review

Avant la version Vue3, les données de réponse étaient définies dans la fonction de données

<template>
  <h2>{{ title }}</h2>
</template>
 
<script>
  export default {
    data() {
      return {
        title: "Hello, Vue!"
      };
    }
  };
</script>

Vue2 parcourra toutes les propriétés des données et utilisera Object.defineProperty pour convertir chaque propriété en getter/setter. Le getter est utilisé. pour collecter les dépendances. Le setter est utilisé pour exécuter des événements de notification et de publication.

Vue2 crée un objet Dep pour chaque propriété en tant qu'intermédiaire dans le modèle d'abonnement-publication pour collecter les dépendances. Vue suit ces dépendances et notifie les modifications lorsqu'elles sont consultées et modifiées.

Vue3

Vue3 introduit ref et reactive pour créer des données réactives :

<template>
  <h2>{{ title }}</h2>
  <h3>{{ data.author }}</h3>
  <button @click=""changeTitle>修改title</button>
</template>
 
<script>
  import { ref, reactive, toRefs } from "vue";
  export default {
    setup() {
      const title = ref("Hello, Vue 3!");
      // 修改
      function changeTitle(){
        title.value == "Hello, Vue3!"
      }
 
      const data = reactive({
        author: "青年码农",
        age: "18"
      });
 
      return { title, data, changeTitle };
    }
  };
</script>

Nous pouvons probablement voir la différence par rapport au code ci-dessus. La fonction de ref est de convertir un type de données primitif en données réactives. Il existe 7 types de données primitifs, à savoir : String, Number, BigInt, Boolean, Symbol, Undefined et Null. Mais il y a une astuce bizarre, c'est que ref peut aussi être un objet. Nous en reparlerons plus tard. La fonction du réactif est de convertir un objet en un objet réactif.

• ref : La fonction de

ref est de convertir un type de données primitif en un type de données avec des fonctionnalités réactives.

const title = ref("Hello, Vue 3!");

ref reçoit le paramètre et le renvoie enveloppé dans un objet avec un attribut value. Cet attribut peut ensuite être utilisé pour accéder ou modifier la valeur de la variable réactive. Par exemple, dans le code ci-dessus, nous utilisons count.value pour. modifiez la valeur, comme suit :

title.value = "Hello, Vue3!"

Comme mentionné ci-dessus, ref peut également accepter des types d'objet

const data = ref({
    author: "青年码农",
    age: "18"
});

C'est également possible, mais ce sera un peu gênant lors de l'attribution de valeurs.

data.value.author = "nmgwap";

ref Le principe réactif repose sur Object.defineProperty(), donc s'il s'agit d'un objet, il est recommandé d'utiliser réactif.

• reactive :

reactive renvoie une copie réactive de l'objet, qui déballera toutes les références profondes tout en conservant la réactivité des références. Généralement, nous l'utilisons pour implémenter la réactivité des objets ou des tableaux.

const data = reactive({
    author: "青年码农",
    age: "18"
});

La modification n'est pas différente des objets ordinaires, la vue sera mise à jour en temps réel

data.author = "nmgwap"

Remarque :

ref est destiné aux types de données primitifs et réactif est destiné aux objets. types à JavaScript. Réactivité (réactivité).

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!