Detaillierte Erläuterung der berechneten Funktion in der Vue-Dokumentation-View.js-php.cn

Detaillierte Erläuterung der berechneten Funktion in der Vue-Dokumentation

WBOY

Freigeben： 2023-06-20 20:51:09

Original

2143 Leute haben es durchsucht

Vue.js ist ein beliebtes JavaScript-Frontend-Framework. Es kann problemlos die Verbindung zwischen HTML und JavaScript realisieren und so die Leistung von Webanwendungen verbessern. Im Vue.js-Framework gibt es eine Funktion namens computed. Ihr Hauptzweck besteht darin, reaktionsfähige Berechnungen und Formeloperationen für Seitendaten durchzuführen. Als nächstes erklären wir diese Funktion im Detail. computed的函数，其主要用途是用来对页面数据进行响应式计算和公式运算。接下来就让我们来详解一下这个函数。

什么是computed函数？

computed函数是Vue.js中的一个非常重要的函数，其作用是用于计算属性，计算属性能对其他的属性进行数据处理，返回新的数据。computed函数依赖于data对象中定义的数据，当这些数据发生变化时，computed函数内部的代码也会自动更新。

我们可以将computed函数看做是Vue中的一个响应式数据，因为它也具备响应式的特性。当计算属性的依赖数据发生改变时，计算属性会自动重新计算。

语法

computed函数的语法非常简单：

computed: {
    计算属性名字: function() {
        //return 你要计算的值
    }
}

Nach dem Login kopieren

这里我们需要用到一个关键字computed，其后面跟着一个对象，对象中包含一个或者多个计算属性。计算属性名字即为我们自己定义的名称（可以理解为变量名），它们的返回值就是我们计算结果。这里需要注意的是，在计算属性的方法中不要对其他的data数据进行手动更改，因为这样会造成死循环。

实例

为了帮助大家更好地理解computed函数，下面来看一个实例。

<div id="app">
    <input v-model="message" />
    <p>{{ reversedMessage }}</p>
</div>

Nach dem Login kopieren

我们在模板中定义了一个输入框和一个段落标签，输入框中的内容通过v-model指令与data中的message数据绑定。同时，我们定义了一个计算属性reversedMessage，该计算属性返回的是message数据的倒序排列结果。下面是完整的JavaScript代码：

var app = new Vue({
    el: '#app',
    data: {
        message: ''
    },
    computed: {
        reversedMessage: function() {
            return this.message.split('').reverse().join('')
        }
    }
})

Nach dem Login kopieren

这个实例中的computed函数中的reversedMessage方法是用来计算message倒序结果的。当我们在输入框中输入信息时，reversedMessage方法就会自动地被触发更新。这是因为reversedMessage方法依赖于data中的message数据，只要该数据发生变化，reversedMessage方法就会自动刷新页面。

computed函数的优点

computed函数主要有以下几个优点：

1.节省代码：在使用computed函数的情况下，我们无需写过多的代码，就可以完成对数据的更新和计算。

2.提高性能：computed函数的计算结果是会缓存的，只有当其所依赖的数据发生改变时，才会重新计算。

3.代码简洁：由于computed函数自动检测数据更改，所以我们无需事先指定计算属性的依赖数据。这样就可以大大简化我们的代码。

总结

computed

Was ist eine berechnete Funktion? 🎜🎜Die Funktion berechnet ist eine sehr wichtige Funktion in Vue.js. Ihre Funktion besteht darin, Eigenschaften zu berechnen, die Datenverarbeitung für andere Eigenschaften durchführen und neue Daten zurückgeben können. Die Funktion berechnet basiert auf den im Datenobjekt definierten Daten. Wenn sich diese Daten ändern, wird der Code in der Funktion berechnet automatisch aktualisiert. 🎜🎜Wir können die berechnete-Funktion als reaktive Daten in Vue betrachten, da sie auch reaktionsfähige Eigenschaften aufweist. Berechnete Eigenschaften werden automatisch neu berechnet, wenn sich ihre abhängigen Daten ändern. 🎜🎜Syntax🎜🎜Die Syntax der Funktion berechnet ist sehr einfach: 🎜rrreee🎜Hier müssen wir ein Schlüsselwort berechnet verwenden, gefolgt von einem Objekt, das ein oder enthält Mehrere berechnete Eigenschaften. Berechnete Attributnamen sind von uns selbst definierte Namen (kann als Variablennamen verstanden werden), und ihre Rückgabewerte sind unsere Berechnungsergebnisse. Hierbei ist zu beachten, dass andere Daten in der Methode zur Berechnung von Attributen nicht manuell geändert werden, da dies zu einer Endlosschleife führt. 🎜🎜Beispiel🎜🎜Um Ihnen zu helfen, die Funktion berechnet besser zu verstehen, schauen wir uns unten ein Beispiel an. 🎜rrreee🎜Wir haben in der Vorlage ein Eingabefeld und ein Absatz-Tag definiert. Der Inhalt des Eingabefelds ist über die V-Modell-Direktive an die Nachrichtendaten in Daten gebunden. Gleichzeitig haben wir ein berechnetes Attribut reversedMessage definiert, das die umgekehrte Reihenfolge der Nachrichtendaten zurückgibt. Das Folgende ist der vollständige JavaScript-Code: 🎜rrreee🎜Die Methode reversedMessage in der Funktion computed wird in diesem Beispiel verwendet, um das Ergebnis der umgekehrten Nachrichtenreihenfolge zu berechnen. Wenn wir Informationen in das Eingabefeld eingeben, wird die Methode reversedMessage automatisch zur Aktualisierung ausgelöst. Dies liegt daran, dass die reversedMessage-Methode auf den message-Daten in data basiert. Solange sich die Daten ändern, aktualisiert die reversedMessage-Methode die Seite automatisch . 🎜🎜Vorteile der berechneten Funktion🎜🎜Die Funktion berechnet hat hauptsächlich die folgenden Vorteile: 🎜🎜1. Code speichern: Bei Verwendung der Funktion berechnet ist dies nicht erforderlich Schreiben Mit mehr Code können Sie die Aktualisierung und Berechnung der Daten abschließen. 🎜🎜2. Leistung verbessern: Die Berechnungsergebnisse der berechneten-Funktion werden zwischengespeichert und nur dann neu berechnet, wenn sich die Daten ändern, von denen sie abhängt. 🎜🎜3. Prägnanter Code: Da die Funktion berechnet Datenänderungen automatisch erkennt, müssen wir die abhängigen Daten des berechneten Attributs nicht im Voraus angeben. Dies vereinfacht unseren Code erheblich. 🎜🎜Zusammenfassung🎜🎜Die Funktion berechnet ist eine sehr nützliche Datenwertmethode in Vue.js. Es ermöglicht uns eine bequemere Berechnung und Aktualisierung von Daten und bietet große Vorteile hinsichtlich der Einfachheit und Leistung des Codes. Wenn Sie neu bei Vue.js sind, wird empfohlen, beim Erlernen des Vue.js-Frameworks zunächst die Verwendung berechneter Funktionen zu beherrschen. 🎜

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