Ausführliche Erläuterung der berechneten Eigenschaftsfunktionen in der Vue-Dokumentation

Vue.js ist ein beliebtes Front-End-Framework, das viele Funktionen und Komponenten bereitstellt, die die Entwicklung erleichtern. Eines der sehr wichtigen Merkmale ist die berechnete Eigenschaftsfunktion. Berechnete Attribute können dynamisch einen neuen Attributwert basierend auf Daten berechnen, wodurch die Notwendigkeit vermieden wird, komplexe Ausdrücke direkt in der Vorlage zu berechnen. In diesem Artikel werden die berechneten Eigenschaftsfunktionen im Vue-Dokument ausführlich vorgestellt.

1. Definition und Verwendung berechneter Eigenschaften

Die berechnete Eigenschaft ist eine spezielle Eigenschaft in Vue und ihr Wert ist eine Funktion. Ein Beispiel für die Definition einer berechneten Eigenschaft in einem Vue-Instanzobjekt:

var vm = new Vue({
  data: {
    message: 'Hello World'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

Im obigen Code ist eine berechnete Eigenschaft reversedMessage im Vue-Instanzobjekt definiert und sie gibt ein Reversed zurück Nachricht. reversedMessage，它的值是一个函数，返回的是一个经过反转的消息。

计算属性可以在模板中像数据属性一样使用，例：

<div id="app">
  <p>Original message: {{ message }}</p>
  <p>Reversed message: {{ reversedMessage }}</p>
</div>

在渲染的时候，“Original message:”和“Reversed message:”会分别显示“Hello World”和“dlroW olleH”。

二、计算属性的缓存

计算属性有一个很重要的特性，就是对于相同的输入返回相同的输出，所以它们被缓存了起来。例如，在上述示例中，只要message没有改变，多次使用reversedMessage都会返回相同的字符串。

这个特性在模板中使用计算属性的时候非常有用，因为它避免了在模板中重复计算复杂的表达式。

三、计算属性的getter和setter

在计算属性中，getter函数是必须的，它定义了计算属性的输出值。在一些情况下，你可能需要添加一个setter函数，它定义了计算属性的输入值。

例如，我们可以定义一个计算属性fullName，它的getter返回一个拼接了firstName和lastName的字符串，setter可以分离fullName的内容为firstName和lastName。

var vm = new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      // Getter
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      // Setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
})

在上述代码中，我们可以通过fullName的getter获取当前的全名，也可以通过setter设置新的全名。例如：

console.log(vm.fullName) // John Doe

vm.fullName = 'Jane Smith'
console.log(vm.firstName) // Jane
console.log(vm.lastName) // Smith

四、计算属性的实时计算

计算属性是对数据属性进行实时计算的最好方法。Vue在数据属性改变后，它会在下一次需要渲染模板的时候计算新的计算属性的值。如果计算属性依赖的数据没有改变，计算属性就会使用之前缓存的值。

var vm = new Vue({
  data: {
    radius: 5
  },
  computed: {
    diameter: function () {
      return this.radius * 2
    },
    circumference: function () {
      return 2 * Math.PI * this.radius
    }
  }
})

在上述代码中，我们定义了一个计算属性diameter和circumference，它们都依赖于radius属性。当radius属性改变时，这些计算属性会重新计算。例如：

console.log(vm.diameter) // 10

vm.radius = 10
console.log(vm.circumference) // 62.83185307179586

五、计算属性和方法的区别

在Vue中，有一个很相似的概念叫做方法，方法可以在模板中用v-on指令来调用。方法和计算属性都可以根据数据属性的变化来改变它们的值。

那么方法与计算属性的区别在哪里呢？

首先，与计算属性不同，方法总是会重新计算，并不能像计算属性一样缓存它们的结果。方法通常适用于需要每次重新计算的复杂逻辑或需要传入特定参数的逻辑。

其次，计算属性只有getter，而方法只有setter。虽然方法可以返回一个值，但是这个返回值并不会被缓存。

最后，计算属性可以像数据属性一样方便地在模板中使用，而对于方法必须使用v-on

Berechnete Eigenschaften können in Vorlagen wie Dateneigenschaften verwendet werden, zum Beispiel:

rrreee

Beim Rendern werden für „Originalnachricht:“ und „Umgekehrte Nachricht:“ „Hello World“ bzw. „dlroW olleH“ angezeigt.

2. Zwischenspeicherung berechneter Attribute🎜🎜Berechnete Attribute haben eine sehr wichtige Funktion, nämlich die gleiche Ausgabe für die gleiche Eingabe zurückzugeben, sodass sie zwischengespeichert werden. Im obigen Beispiel wird beispielsweise bei mehrfacher Verwendung von reversedMessage dieselbe Zeichenfolge zurückgegeben, solange sich die message nicht geändert hat. 🎜🎜Diese Funktion ist sehr nützlich, wenn berechnete Eigenschaften in Vorlagen verwendet werden, da dadurch die wiederholte Berechnung komplexer Ausdrücke in der Vorlage vermieden wird. 🎜🎜3. Getter und Setter berechneter Attribute🎜🎜In berechneten Attributen ist die Getter-Funktion erforderlich, die den Ausgabewert des berechneten Attributs definiert. In einigen Fällen müssen Sie möglicherweise eine Setter-Funktion hinzufügen, die den Eingabewert der berechneten Eigenschaft definiert. 🎜🎜Zum Beispiel können wir eine berechnete Eigenschaft fullName definieren, deren Getter eine mit firstName und lastName verkettete Zeichenfolge zurückgibt, und der Setter kann sein getrennt Der Inhalt von fullName ist firstName und lastName. 🎜rrreee🎜Im obigen Code können wir den aktuellen vollständigen Namen über den Getter von fullName abrufen oder den neuen vollständigen Namen über den Setter festlegen. Zum Beispiel: 🎜rrreee🎜4. Echtzeitberechnung berechneter Attribute🎜🎜Berechnete Attribute sind die beste Möglichkeit, Echtzeitberechnungen für Datenattribute durchzuführen. Nachdem Vue das Datenattribut geändert hat, berechnet es den Wert des neu berechneten Attributs, wenn die Vorlage das nächste Mal gerendert werden muss. Wenn sich die Daten, von denen die berechnete Eigenschaft abhängt, nicht geändert haben, verwendet die berechnete Eigenschaft den zuvor zwischengespeicherten Wert. 🎜rrreee🎜Im obigen Code definieren wir eine berechnete Eigenschaft diameter und circumference, die beide von der Eigenschaft radius abhängen. Diese berechneten Eigenschaften werden neu berechnet, wenn sich die Eigenschaft radius ändert. Zum Beispiel: 🎜rrreee🎜 5. Der Unterschied zwischen berechneten Eigenschaften und Methoden 🎜🎜In Vue gibt es ein sehr ähnliches Konzept namens Methode. Methoden können in Vorlagen mit der v-on-Direktive aufgerufen werden. Sowohl Methoden als auch berechnete Eigenschaften können ihre Werte basierend auf Änderungen der Dateneigenschaften ändern. 🎜🎜Was ist also der Unterschied zwischen Methoden und berechneten Eigenschaften? 🎜🎜Zuallererst werden Methoden im Gegensatz zu berechneten Eigenschaften immer neu berechnet und ihre Ergebnisse können nicht wie berechnete Eigenschaften zwischengespeichert werden. Methoden eignen sich im Allgemeinen für komplexe Logik, die jedes Mal neu berechnet werden muss, oder für Logik, die die Übergabe bestimmter Parameter erfordert. 🎜🎜Zweitens haben berechnete Eigenschaften nur Getter, während Methoden nur Setter haben. Obwohl eine Methode einen Wert zurückgeben kann, wird der Rückgabewert nicht zwischengespeichert. 🎜🎜Schließlich können berechnete Eigenschaften genauso einfach in Vorlagen verwendet werden wie Dateneigenschaften, während Methoden mit der v-on-Direktive aufgerufen werden müssen. Wenn Sie den Wert einer berechneten Eigenschaft in einer Vorlage anzeigen möchten, ist die Verwendung einer berechneten Eigenschaft die bessere Wahl. 🎜🎜6. Zusammenfassung🎜🎜In Vue sind berechnete Attribute die beste Möglichkeit, Datenattribute in Echtzeit zu berechnen. Es verfügt über Caching-Eigenschaften, vermeidet wiederholte Berechnungen, kann komplexe Geschäftslogik implementieren und verbessert die Lesbarkeit und Wartbarkeit des Codes. Gleichzeitig können berechnete Eigenschaften auch Getter- und Setter-Funktionen bereitstellen, sodass wir berechnete Eigenschaften frei bedienen können. Im Gegensatz zu berechneten Eigenschaften werden Methoden immer neu berechnet, was für Logik geeignet ist, die jedes Mal neu berechnet werden muss, oder für Logik, die Parameter übergeben muss. Für Logik, die häufig Berechnungen erfordert, wird empfohlen, berechnete Eigenschaften zu verwenden. 🎜

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der berechneten Eigenschaftsfunktionen in der Vue-Dokumentation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!