Der Unterschied zwischen Methode und Berechnung in Vue-js-Tutorial-php.cn

Der Unterschied zwischen Methode und Berechnung in Vue

php中世界最好的语言

Freigeben： 2018-03-28 11:48:45

Original

1363 Leute haben es durchsucht

Dieses Mal werde ich Ihnen den Unterschied zwischen Methode und Berechnung in Vue erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Methode und Berechnung in Vue? Hier sind praktische Fälle.

Sowohl berechnete als auch Methoden in den Konfigurationsparametern des neuen Vue können eine große Menge an Logikcode verarbeiten, aber wann welches Attribut verwendet werden soll, muss sorgfältig unterschieden werden, um Vue korrekt verwenden zu können.

berechnet wird als berechnetes Attribut bezeichnet. Wenn wir also viel Logik verarbeiten müssen, möchten wir am Ende das Endergebnis erhalten kann berechnet werden;

Um den Unterschied zwischen Methode und berechnet zu veranschaulichen, möchte ich zunächst einen Blick darauf werfen, was das berechnete Attribut auf der offiziellen Vue-Website sagt: Ausdrücke in Vorlagen sind sehr praktisch, dienen aber eigentlich nur der einfachen Berechnung. Wenn einer Vorlage zu viel Logik hinzugefügt wird, kann sie übergewichtig und schwer zu warten sein.

Schauen wir uns ein Beispiel an:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head>
<body>
<p id="app">
//直接在模板中绑定表达式
<p>{{message.split('').reverse().join('')}}</p>
//运用计算属性
<p>message反转之后的结果:{{reverseMessage}}</p>
</p>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>

Nach dem Login kopieren

Im obigen Fall ist die Vorlage nicht mehr einfach und klar. Sie müssen ein zweites Mal bestätigen, bevor Sie erkennen, dass es sich um eine umgekehrte Nachricht handelt. Das Problem wird noch schlimmer, wenn Sie die Nachricht in der Vorlage mehrmals in umgekehrter Reihenfolge anzeigen möchten. Aus diesem Grund sollten Sie für jede komplexe Logik berechnete Eigenschaften verwenden. Im Folgenden verwende ich zum Vergleich die Methode und die Berechnung:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head>
<body>
<p id="app">
<p>{{message}}</p>
//直接在模板中绑定表达式
<p>{{message.split('').reverse().join('')}}</p>
//运用计算属性
<p>{{reverseMessage}}</p>
//运用methods方式
<p>{{methodMessage()}}</p>
</p>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('');
}
},
methods:{
methodMessage:function () {
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>

Nach dem Login kopieren

Ich vergleiche diese beiden Methoden. Das zurückgegebene Ergebnis ist das gleiche, aber bei der Methode zur Berechnung berechneter Attribute müssen Sie bei Verwendung von Attributen nicht () hinzufügen, während die Methodenmethode wie eine Methode verwendet werden sollte und Sie () hinzufügen müssen.

Die beiden Methoden unterscheiden sich auch stark beim Caching. Das berechnete Attribut wird verwendet, um die ReverseMessage an die Nachricht zu binden, während die Methodenmethode dies jedes Mal erfordert Die Seite wird aufgerufen. Führen Sie diese Methode aus. Wenn Sie jedoch Echtzeitinformationen verwenden, z. B. die Anzeige des aktuellen Zeitpunkts der Eingabe der Seite, müssen Sie Methoden verwenden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Anzeige der HTTP-Anfrage und des Ladens in Vue2.0

Wie realisiert Vue2.0 die bidirektionale Komponentendatenbindung?

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen Methode und Berechnung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!