Was ist der Unterschied zwischen Methode und Berechnung in Vue?-js-Tutorial-php.cn

Was ist der Unterschied zwischen Methode und Berechnung in Vue?

php中世界最好的语言

Freigeben： 2018-04-12 10:49:36

Original

1479 Leute haben es durchsucht

Dieses Mal werde ich Ihnen den Unterschied zwischen der Verwendung von Methode und der Berechnung in Vue vorstellen. Was sind die Vorsichtsmaßnahmen, wenn Sie in Vue eine Methode verwenden? sehen. .

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, aber das Endergebnis erhalten möchten, können wir berechnet werden 🎜> Um den Unterschied zwischen Methode und berechnet zu veranschaulichen, möchte ich hier zunächst einen Blick auf die Aussage des berechneten Attributs auf der offiziellen Vue-Website werfen:

Ausdrücke

in Vorlagen sind sehr praktisch, aber eigentlich nur Wird für eine einfache Bedienung verwendet. Wenn einer Vorlage zu viel Logik hinzugefügt wird, kann sie übergewichtig und schwer zu warten sein. Schauen wir uns ein Beispiel an:

In diesem 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. Wenn Sie in einer Vorlage mehrere Male in umgekehrter Reihenfolge anzeigen möchten Nachricht , das Problem wird schlimmer. Aus diesem Grund sollten Sie für jede komplexe Logik berechnete Eigenschaften verwenden. Im Folgenden verwende ich die Methode und die Berechnung zum Vergleich:

<!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

Ich habe diese beiden Methoden verglichen. 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.

<!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

Auch beim

Caching

unterscheiden sich die beiden Methoden stark ReverseMessage ist an die Nachricht gebunden. Die Methodenmethode besteht darin, diese Methode jedes Mal auszuführen, wenn Sie die Seite betreten , müssen Sie die Methodenmethode 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:

Detaillierte Erläuterung der HTTP-Anfrage und der Ladeanzeigenutzung von Vue2.0

Prozess- und child_process-Module des Knotens Ausführliche Nutzungserklärung

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