So verwenden Sie ref und reactive in vue3

1. ref

ref ist eine Funktion in Vue3, die eine gewöhnliche Variable in eine responsive Variable strong> umwandeln kann . Wenn wir ref verwenden, müssen wir einen Anfangswert übergeben, und ref gibt ein Objekt zurück, das diesen Anfangswert enthält. ref 是 Vue3 中的一个函数，它可以将一个普通的变量转化为一个响应式变量。使用 ref 的时候，我们需要传入一个初始值，ref 会返回一个包含了这个初始值的对象。

使用 ref 的语法如下所示：

import { ref } from 'vue';
const count = ref(0);

在上面的代码中，我们创建了一个名为 count 的变量，它的初始值为 0。通过调用 ref 函数，我们将 count 变量转化为了一个 ref 对象。在组件中使用 count 的时候，我们需要通过 .value 来访问它的值,且ref.value = 可以修改它的值。但是当 ref 在模板中作为顶层属性被访问时，它们会被自动“解包”，所以不需要使用 .value。：

------------------

注意：在标签中使用无需加.value，在函数中使用必须要加.value

除此之外，ref 还可以用来监听 DOM 元素的变化：

<template>
  <div ref="myDiv">这是一个 DOM 元素</div>
</template>

<script>
  import { ref, onMounted } from &#39;vue&#39;;

  export default {
    setup() {
      const myDiv = ref(null);

      onMounted(() => {
        console.log(myDiv.value.innerHTML);
      });

      return {
        myDiv,
      };
    },
  };
</script>

在上面的代码中，我们创建了一个名为 myDiv 的 ref 对象，并将它赋值给了一个 div 元素。在组件的 setup 函数中，我们使用了 onMounted 钩子函数，在组件渲染完成之后，打印出了 myDiv 元素的 innerHTML。

二、reactive

reactive 是 Vue3 中的另一个 API，它可以将一个普通的对象转化为一个响应式对象。与 ref 不同的是，reactive 返回的是一个响应式的对象，而不是一个包含值的对象。我们可以通过访问响应式对象的属性来获取或修改它的值。

使用 reactive 的语法如下所示：

import { reactive } from 'vue';
const state = reactive({
  count: 0,
});

在上面的代码中，我们创建了一个名为 state 的响应式对象，它包含了一个名为 count 的属性，初始值为 0。

在组件中使用 state 的时候，我们可以像访问普通对象的属性一样访问它的属性：

<template>
  <div>{{ state.count }}</div>
</template>

除了访问属性之外，reactive 也可以对普通 JavaScript 对象或数组进行响应式处理，可以通过 reactive 将一个普通对象转化为响应式对象，从而实现对整个对象的响应式追踪，例如：

const obj = { a: 1, b: 2 };
const reactiveObj = reactive(obj);

// 响应式追踪
reactiveObj.a = 3;
console.log(obj.a); // 输出 3

reactive 还可以在嵌套对象和数组中创建响应式对象，例如：

const obj = { 
  a: 1, 
  b: { c: 2 }，
  d: [1, 2, 3]
};
const reactiveObj = reactive(obj);

// 响应式追踪
reactiveObj.b.c = 3;
reactiveObj.d.push(4);

reactive 还支持在嵌套对象中使用 toRefs 将响应式对象的属性转换为响应式引用，方便在模板中使用。例如：

const obj = reactive({ a: 1, b: { c: 2 } });
const { b } = toRefs(obj);

// 模板中使用
<template>
  <div>{{ b.c }}</div>
</template>

总之，reactive 除了访问属性之外还能处理整个对象或数组的响应式追踪，以及支持在嵌套对象中使用 toRefs 方便在模板中使用。

三、ref和reactive的使用对比

1.ref的使用方法

ref创建的变量可以通过.value来获取和修改其值。例如：

import { ref } from 'vue'

// 创建ref
const count = ref(0)

// 获取ref的值
console.log(count.value) // 输出 0

// 修改ref的值
count.value = 1
console.log(count.value) // 输出 1

2. reactive的使用方法

reactive

Die Syntax für die Verwendung von ref lautet wie folgt: 🎜

import { reactive } from 'vue'

// 创建reactive对象
const obj = reactive({
  count: 0
})

// 获取reactive对象的属性值
console.log(obj.count) // 输出 0

// 修改reactive对象的属性值
obj.count = 1
console.log(obj.count) // 输出 1

🎜Im obigen Code haben wir eine Variable namens count mit einem Anfangswert von 0 erstellt. Durch den Aufruf der Funktion ref konvertieren wir die Variable count in ein Objekt ref. Wenn wir count in einer Komponente verwenden, müssen wir über .value auf seinen Wert zugreifen, und ref.value = kann seinen Wert ändern. Wenn jedoch auf ref als Eigenschaften der obersten Ebene in Vorlagen zugegriffen wird, werden sie automatisch „entpackt“, sodass keine Notwendigkeit besteht, .value zu verwenden. ：🎜rrreee🎜Hinweis: Es ist nicht erforderlich, .value hinzuzufügen, wenn es in Tags verwendet wird, aber .value muss hinzugefügt werden, wenn es in Funktionen verwendet wird🎜🎜Außerdem muss hinzugefügt werden >ref kann auch verwendet werden, um Änderungen in DOM-Elementen zu überwachen: 🎜rrreee🎜Im obigen Code erstellen wir ein <code>ref-Objekt mit dem Namen myDiv und fügen es Assigned hinzu zu einem div-Element hinzufügen. In der Funktion setup der Komponente verwenden wir die Hook-Funktion onMounted. Nachdem das Rendern der Komponente abgeschlossen ist, wird der myDiv angezeigt Element wird ausgedruckt. 🎜🎜2. reactive🎜🎜reactive ist eine weitere API in Vue3, die ein <strong>normales Objekt</strong> in ein <strong>responsives Objekt</strong> umwandeln kann. Im Gegensatz zu <code>ref gibt reactive ein reaktives Objekt zurück und nicht ein Objekt, das einen Wert enthält. Wir können den Wert eines reaktiven Objekts abrufen oder ändern, indem wir auf seine Eigenschaften zugreifen. 🎜🎜Die Syntax für die Verwendung von Reaktiv lautet wie folgt: 🎜rrreee🎜Im obigen Code erstellen wir ein reaktives Objekt mit dem Namen state, das ein Objekt mit dem Namen count code> Attribut enthält, das Der Anfangswert ist 0. 🎜🎜Wenn wir <code>state in einer Komponente verwenden, können wir auf deren Eigenschaften genau wie auf die Eigenschaften eines normalen Objekts zugreifen: 🎜rrreee🎜Zusätzlich zum Zugriff auf Eigenschaften kann reactive auch For sein Bei der reaktionsfähigen Verarbeitung gewöhnlicher JavaScript-Objekte oder -Arrays können Sie reactive verwenden, um ein gewöhnliches Objekt in ein reaktionsfähiges Objekt umzuwandeln und so eine reaktionsfähige Verfolgung des gesamten Objekts zu erreichen. Beispiel: 🎜rrreee🎜reactive kann ebenfalls verwendet werden in Erstellen Sie reaktionsfähige Objekte in verschachtelten Objekten und Arrays, zum Beispiel: 🎜rrreee🎜reactive unterstützt auch die Verwendung von toRefs in verschachtelten Objekten, um die Eigenschaften von reaktionsfähigen Objekten in reaktionsfähige Referenzen umzuwandeln, um sie einfacher in Vorlagen verwenden zu können. Zum Beispiel: 🎜rrreee🎜Kurz gesagt, reactive kann neben dem Zugriff auf Eigenschaften auch die reaktionsfähige Verfolgung des gesamten Objekts oder Arrays verarbeiten und unterstützt die Verwendung von toRefs in verschachtelten Objekten für Bequemlichkeit. Wird in Vorlagen verwendet. 🎜🎜3. Vergleich der Verwendung von ref und reactive🎜

1. So verwenden Sie ref

🎜Die von ref erstellten Variablen können über .value abgerufen werden. Code> Ändern Sie seinen Wert. Zum Beispiel: 🎜rrreee<h4>2. So verwenden Sie reaktiv</h4>🎜<code>reaktiv Das erstellte Objekt muss seine Attributwerte durch destrukturierende Zuweisung erhalten und ändern. Zum Beispiel: 🎜rrreee

Das obige ist der detaillierte Inhalt vonSo verwenden Sie ref und reactive in vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!