Berechnete Eigenschaftsfunktionen in Vue3: Ermöglichen das Schreiben eleganterer Codes-View.js-php.cn

Berechnete Eigenschaftsfunktionen in Vue3: Ermöglichen das Schreiben eleganterer Codes

WBOY

Freigeben： 2023-06-18 23:00:41

Original

1620 Leute haben es durchsucht

In Vue.js verwenden wir häufig berechnete Eigenschaftsfunktionen, um Daten zu verwalten und bestimmte Inhalte in Vorlagen darzustellen. In Vue.js Version 3 sind die Funktionen der berechneten Eigenschaftsfunktionen leistungsfähiger und flexibler geworden, sodass wir ausdrucksstärkeren und eleganteren Code schreiben können.

Berechnete Eigenschaften sind Eigenschaften, die auf der Grundlage einer oder mehrerer reaktiver Abhängigkeiten in der Vue-Instanz berechnet werden. Wenn eine reaktive Abhängigkeit aktualisiert wird, berechnet eine berechnete Eigenschaft ihren Wert neu und ist daher reaktiv. Die Syntax berechneter Eigenschaften lautet wie folgt:

computed: {
  propName: function() {
    // return value based on reactive dependencies
  }
}

Nach dem Login kopieren

In Vue.js 3 können berechnete Eigenschaftsfunktionen auf die folgenden zwei Arten verwendet werden:

Definieren Sie berechnete Eigenschaftsfunktionen über die Methode berechnet< /ol>computed方法定义计算属性函数

使用Vue.js 3中的computed函数可以更轻松地定义计算属性函数。它可以接收一个函数作为参数，并返回一个响应式的引用，该引用会自动计算和更新其值。

例如，假设我们有一个组件，它需要通过计算两个变量的和来定义一个计算属性。在Vue.js 3中，我们可以这样编写：

<template>
  <div>{{ sum }}</div>
</template>

<script>
import { computed } from 'vue';

export default {
  setup() {
    const num1 = 2;
    const num2 = 3;
    
    const sum = computed(() => {
      return num1 + num2;
    });
    
    return { sum };
  }
}
</script>

Nach dem Login kopieren

在上面的例子中，我们使用了Vue.js 3中的computed函数来定义计算属性sum。computed函数可以接收一个函数作为参数，该函数使用Vue.js 3的响应式API来计算计算属性的值。我们定义了两个变量num1和num2，然后使用箭头函数返回它们的和。最终，我们在组件选项中返回sum计算属性。

使用ref和watch函数定义计算属性函数

另一种常见的使用Vue.js 3中计算属性函数的方法是使用ref和watch函数。在这种情况下，我们可以首先使用ref函数定义计算属性函数的起始值，然后使用watch函数来定义计算属性函数的计算逻辑和其响应式依赖。

<template>
  <div>{{ sum }}</div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const num1 = ref(2);
    const num2 = ref(3);
    const sum = ref(num1.value + num2.value);

    watch([num1, num2], () => {
      sum.value = num1.value + num2.value;
    });

    return { sum };
  }
}
</script>

Nach dem Login kopieren

在上面的例子中，我们首先使用ref函数来定义响应式变量num1和num2，分别赋值为2和3。然后，我们使用ref函数再次定义响应式变量sum，并将其初始值设置为num1.value + num2.value。

接下来，我们使用Vue.js 3的watch函数来监听num1和num2的变化，当num1和num2的值发生变化时，watch函数会自动更新sum的值。我们使用sum.value来更新计算属性的值，以确保其响应式地更新到我们的模板中。

总结

Vue.js 3中的计算属性函数可以让我们更轻松、更有效地管理数据并渲染页面。我们可以使用computed函数或者ref和watchBerechnete Eigenschaftsfunktionen können einfacher mit der Funktion berechnet in Vue.js 3 definiert werden. Es nimmt eine Funktion als Parameter und gibt eine reaktive Referenz zurück, die ihren Wert automatisch berechnet und aktualisiert.

🎜Nehmen wir zum Beispiel an, wir haben eine Komponente, die eine berechnete Eigenschaft definieren muss, indem sie die Summe zweier Variablen berechnet. In Vue.js 3 können wir so schreiben: 🎜rrreee🎜Im obigen Beispiel verwenden wir die Funktion computed in Vue.js 3, um die berechnete Eigenschaft sum zu definieren . Die Funktion berechnet kann eine Funktion als Parameter empfangen, die die reaktive API von Vue.js 3 verwendet, um den Wert der berechneten Eigenschaft zu berechnen. Wir definieren zwei Variablen num1 und num2 und verwenden dann Pfeilfunktionen, um ihre Summe zurückzugeben. Schließlich geben wir die berechnete Eigenschaft sum in den Komponentenoptionen zurück. 🎜

ref

watch

🎜Eine weitere häufige Verwendung von Vue Die Methode zur Berechnung von Attributfunktionen in js 3 besteht darin, die Funktionen ref und watch zu verwenden. In diesem Fall können wir zunächst die Funktion ref verwenden, um den Startwert der berechneten Attributfunktion zu definieren, und dann die Funktion watch verwenden, um die Berechnungslogik und ihre Reaktion zu definieren der berechneten Attributfunktion. 🎜rrreee🎜Im obigen Beispiel verwenden wir zunächst die Funktion ref, um die responsiven Variablen num1 und num2 zu definieren und ihnen Werte zuzuweisen zu 2 bzw. 3. Dann verwenden wir die Funktion ref, um die reaktive Variable sum erneut zu definieren und ihren Anfangswert auf num1.value + num2.value zu setzen. 🎜🎜Als nächstes verwenden wir die Funktion watch von Vue.js 3, um die Änderungen von num1 und num2 bei num1 Wenn sich die Werte von code> und <code>num2 ändern, aktualisiert die Funktion watch automatisch den Wert von sum. Wir verwenden sum.value, um den Wert einer berechneten Eigenschaft zu aktualisieren, um sicherzustellen, dass sie reaktionsschnell in unserer Vorlage aktualisiert wird. 🎜🎜Zusammenfassung🎜🎜Die berechneten Eigenschaftenfunktionen in Vue.js 3 ermöglichen es uns, Daten einfacher und effizienter zu verwalten und Seiten zu rendern. Wir können die Funktion computed oder die Funktionen ref und watch verwenden, um berechnete Eigenschaftsfunktionen zu definieren, wodurch wir eleganteren und ausdrucksstärkeren Code schreiben können. Durch die Verwendung der berechneten Eigenschaftenfunktionen von Vue.js 3 können wir das reaktive System von Vue.js umfassender nutzen und die Wartbarkeit und Wiederverwendbarkeit unserer Anwendungen verbessern. 🎜

Das obige ist der detaillierte Inhalt vonBerechnete Eigenschaftsfunktionen in Vue3: Ermöglichen das Schreiben eleganterer Codes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!