suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erklärung des Unterschieds zwischen Methode und Berechnung in Vue (ausführliches Tutorial)

Detaillierte Erklärung des Unterschieds zwischen Methode und Berechnung in Vue (ausführliches Tutorial)

亚连
亚连Original
2018-06-01 11:12:461730Durchsuche

Sowohl die berechneten als auch die 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. In diesem Artikel wird hauptsächlich der Unterschied zwischen Methoden und Berechnungen in Vue vorgestellt. Freunde, die ihn benötigen, können auf

Sowohl berechnete als auch Methoden in den Konfigurationsparametern des neuen Vue zurückgreifen, die eine große Menge an Logikcode verarbeiten können, aber wann sie verwendet werden sollen Welches? Attribute müssen sorgfältig unterschieden werden, um Vue korrekt zu verwenden.

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 erklären, möchte ich zunächst einen Blick auf die Aussage des berechneten Attributs auf der offiziellen Vue-Website werfen: Ausdrücke in Vorlagen sind sehr praktisch, aber sie werden eigentlich nur für einfache Operationen verwendet. 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(&#39;&#39;).reverse().join(&#39;&#39;)}}</p>
//运用计算属性
<p>message反转之后的结果:{{reverseMessage}}</p>
</p>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;);
}
}
})
</script>
</body>
</html>

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 werde ich zum Vergleichen die Methode und die Berechnung verwenden:

<!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(&#39;&#39;).reverse().join(&#39;&#39;)}}</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(&#39;&#39;).reverse().join(&#39;&#39;);
}
},
methods:{
methodMessage:function () {
return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;);
}
}
})
</script>
</body>
</html>

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 bei Verwendung wie Methoden verwendet werden sollte und Sie () hinzufügen müssen.

Die beiden Methoden unterscheiden sich auch stark im Caching. Das berechnete Attribut wird verwendet, um die reverseMessage an die Nachricht zu binden. Die Methodenmethode dient dazu, die Methode jedes Mal auszuführen Seite eingegeben wird, aber bei der Verwendung von Echtzeitinformationen, z. B. der Anzeige des aktuellen Zeitpunkts der Eingabe der Seite, müssen Methoden verwendet werden.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Javascript-Codierungskonvention (Codierungsspezifikation)

Der Unterschied zwischen document.write und document.writeln in js

Detaillierte Erläuterung der Beziehung zwischen Prototyp und __proto__ in Javascript

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Unterschieds zwischen Methode und Berechnung in Vue (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie JS+CSS3, um das Vergrößern und Verkleinern von Bildern als Reaktion auf Mausbewegungen zu realisierenNächster Artikel：So verwenden Sie JS+CSS3, um das Vergrößern und Verkleinern von Bildern als Reaktion auf Mausbewegungen zu realisieren

In Verbindung stehende Artikel

Mehr sehen