So beheben Sie das Versagen der Vue3-Referenz beim Erstellen reaktionsfähiger Variablen

vue3 ref kann keine responsiven Variablen erstellen

Problembeschreibung

Verwenden Sie ref, um responsive Variablen in Vue3 zu deklarieren, und verwenden Sie Funktionen, um die Werte zu ändern, aber die Werte können nicht responsiv geändert werden

<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>

Lösung

Das tue ich nicht wissen warum, wann Wenn die Referenz

import {ref} from "@vue/reactivity"

ist, erfolgt keine Antwort, sondern sie muss nur in

import {ref} from "vue"

vue3 responsive API ref und reactive

geändert werden. Wir wissen, dass die ref-Funktion und die reaktive Funktion verwendet werden Erreichen Sie die Reaktionsfähigkeit der Daten. Aber wie kann man in der Entwicklung zwischen Ref und Reaktiv wählen? Lassen Sie uns über den Unterschied zwischen Ref und Reactive sprechen.

Review

Vor der Vue3-Version wurden die Antwortdaten in der Datenfunktion definiert

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

Vue2 durchläuft alle Eigenschaften in den Daten und verwendet Object.defineProperty, um jede Eigenschaft in einen Getter/Setter umzuwandeln zum Sammeln von Abhängigkeiten. Der Setter wird zum Ausführen von Benachrichtigungs- und Veröffentlichungsereignissen verwendet.

Vue2 erstellt für jede Eigenschaft ein Dep-Objekt als Vermittler im Abonnement-Veröffentlichungsmodell, um Abhängigkeiten zu sammeln. Vue verfolgt diese Abhängigkeiten und benachrichtigt Änderungen, wenn auf sie zugegriffen und sie geändert werden.

Vue3

Vue3 führt ref und reactive ein, um reaktionsfähige Daten zu erstellen:

<template>
  <h2 id="nbsp-title-nbsp">{{ title }}</h2>
  <h3 id="nbsp-data-author-nbsp">{{ 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>

Wir können wahrscheinlich den Unterschied zum obigen Code erkennen. Die Funktion von ref besteht darin, einen primitiven Datentyp in reaktionsfähige Daten umzuwandeln. Es gibt 7 primitive Datentypen, nämlich: String, Number, BigInt, Boolean, Symbol, Undefiniert und Null. Aber es gibt einen seltsamen Trick: ref kann auch ein Objekt sein. Wir werden später darüber reden. Die Funktion von Reactive besteht darin, ein Objekt in ein responsives Objekt umzuwandeln.

• ref: Die Funktion von

ref besteht darin, einen primitiven Datentyp in einen Datentyp mit reaktionsfähigen Funktionen umzuwandeln.

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

ref empfängt den Parameter und gibt ihn in ein Objekt mit einem Wertattribut zurück. Dieses Attribut kann dann verwendet werden, um auf den Wert der responsiven Variablen zuzugreifen oder ihn zu ändern. Im obigen Code verwenden wir beispielsweise count.value Ändern Sie den Wert wie folgt:

title.value = "Hello, Vue3!"

Wie oben erwähnt, kann ref auch Objekttypen akzeptieren

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

Das ist auch möglich, wird aber beim Zuweisen von Werten etwas umständlich sein.

data.value.author = "nmgwap";

ref Das reaktive Prinzip basiert auf Object.defineProperty(). Wenn es sich also um ein Objekt handelt, wird empfohlen, reaktiv zu verwenden.

• reaktiv:

reaktiv gibt eine reaktive Kopie des Objekts zurück, die alle tiefen Refs entpackt und gleichzeitig die Ref-Reaktionsfähigkeit beibehält. Im Allgemeinen verwenden wir es, um die Reaktionsfähigkeit von Objekten oder Arrays zu implementieren.

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

Änderung unterscheidet sich nicht von gewöhnlichen Objekten, die Ansicht wird in Echtzeit aktualisiert

data.author = "nmgwap"

Hinweis:

ref ist für primitive Datentypen und reaktiv ist für Objekte gedacht Typen auf JavaScript. Reaktionsfähigkeit (Reaktivität).

Das obige ist der detaillierte Inhalt vonSo beheben Sie das Versagen der Vue3-Referenz beim Erstellen reaktionsfähiger Variablen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!