Heim Web-Frontend js-Tutorial Der Unterschied zwischen Methode und Berechnung in Vue

Der Unterschied zwischen Methode und Berechnung in Vue

Mar 28, 2018 am 11:48 AM
computed method 区别

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!

Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat -Befehle und wie man sie benutzt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Der Unterschied zwischen char und wchar_t in der C -Sprache Der Unterschied zwischen char und wchar_t in der C -Sprache Apr 03, 2025 pm 03:09 PM

In der C -Sprache ist der Hauptunterschied zwischen char und wchar_t die Zeichencodierung: char verwendet ASCII oder erweitert ASCII, wchar_t Unicode; char nimmt 1-2 Bytes auf, wchar_t nimmt 2-4 Bytes auf; char ist für englischen Text geeignet. Wchar_t ist für mehrsprachige Text geeignet. char ist weithin unterstützt, wchar_t hängt davon ab, ob der Compiler und das Betriebssystem Unicode unterstützen. char ist in der Charakterbereich begrenzt, WCHAR_T hat einen größeren Charakterbereich und spezielle Funktionen werden für arithmetische Operationen verwendet.

Der Unterschied zwischen Multithreading und asynchronem C# Der Unterschied zwischen Multithreading und asynchronem C# Apr 03, 2025 pm 02:57 PM

Der Unterschied zwischen Multithreading und Asynchron besteht darin, dass Multithreading gleichzeitig mehrere Threads ausführt, während asynchron Operationen ausführt, ohne den aktuellen Thread zu blockieren. Multithreading wird für rechenintensive Aufgaben verwendet, während asynchron für die Benutzerinteraktion verwendet wird. Der Vorteil des Multi-Threading besteht darin, die Rechenleistung zu verbessern, während der Vorteil von Asynchron nicht darin besteht, UI-Threads zu blockieren. Die Auswahl von Multithreading oder Asynchron ist von der Art der Aufgabe abhängt: Berechnungsintensive Aufgaben verwenden Multithreading, Aufgaben, die mit externen Ressourcen interagieren und die UI-Reaktionsfähigkeit asynchron verwenden müssen.

Was ist die Funktion der C -Sprachsumme? Was ist die Funktion der C -Sprachsumme? Apr 03, 2025 pm 02:21 PM

Es gibt keine integrierte Summenfunktion in der C-Sprache, daher muss sie selbst geschrieben werden. Die Summe kann erreicht werden, indem das Array durchquert und Elemente akkumulieren: Schleifenversion: Die Summe wird für die Schleifen- und Arraylänge berechnet. Zeigerversion: Verwenden Sie Zeiger, um auf Array-Elemente zu verweisen, und eine effiziente Summierung wird durch Selbststillstandszeiger erzielt. Dynamisch Array -Array -Version zuweisen: Zuordnen Sie Arrays dynamisch und verwalten Sie selbst den Speicher selbst, um sicherzustellen, dass der zugewiesene Speicher befreit wird, um Speicherlecks zu verhindern.

Was sind die grundlegenden Anforderungen für C -Sprachfunktionen? Was sind die grundlegenden Anforderungen für C -Sprachfunktionen? Apr 03, 2025 pm 10:06 PM

C -Sprachfunktionen sind die Grundlage für die Code -Modularisierung und das Programmaufbau. Sie bestehen aus Deklarationen (Funktionsüberschriften) und Definitionen (Funktionskörper). C Sprache verwendet standardmäßig Werte, um Parameter zu übergeben, aber externe Variablen können auch mit dem Adresspass geändert werden. Funktionen können oder haben keinen Rückgabewert, und der Rückgabewerttyp muss mit der Deklaration übereinstimmen. Die Benennung von Funktionen sollte klar und leicht zu verstehen sein und mit Kamel oder Unterstrich die Nomenklatur. Befolgen Sie das Prinzip der einzelnen Verantwortung und behalten Sie die Funktion ein, um die Wartbarkeit und die Lesbarkeit zu verbessern.

Was ist der Unterschied zwischen Char und Unsigned char Was ist der Unterschied zwischen Char und Unsigned char Apr 03, 2025 pm 03:36 PM

Char und Unsigned char sind zwei Datentypen, die Charakterdaten speichern. Der Hauptunterschied ist der Weg, um mit negativen und positiven Zahlen umzugehen: Wertebereich: char signiert (-128 bis 127) und nicht signiertes char nicht signiert (0 bis 255). Negative Zahlenverarbeitung: char kann negative Zahlen speichern, unsigned char kann nicht. Bitmodus: char Das höchste Bit repräsentiert das Symbol, nicht signiertes char unsigned Bit. Arithmetische Operationen: SHOR und unsigned char sind signierte und nicht signierte Typen, und ihre arithmetischen Operationen sind unterschiedlich. Kompatibilität: SHAR und nicht signiertes Zeichen

Der Unterschied zwischen H5- und Miniprogramm und Apps Der Unterschied zwischen H5- und Miniprogramm und Apps Apr 06, 2025 am 10:42 AM

H5. Der Hauptunterschied zwischen Mini -Programmen und App ist: Technische Architektur: H5 basiert auf Web -Technologie, und Mini -Programme und Apps sind unabhängige Anwendungen. Erfahrung und Funktionen: H5 ist leicht und einfach zu bedienen, mit begrenzten Funktionen; Mini -Programme sind leicht und haben eine gute Interaktivität. Apps sind leistungsstark und haben reibungslose Erfahrung. Kompatibilität: H5 ist plattformübergreifend, Applets und Apps werden von der Plattform eingeschränkt. Entwicklungskosten: H5 verfügt über niedrige Entwicklungskosten, mittlere Mini -Programme und die höchste App. Anwendbare Szenarien: H5 eignet sich für Informationsanzeigen, Applets eignen sich für leichte Anwendungen und Apps eignen sich für komplexe Funktionen.

Was sind die Unterschiede und Verbindungen zwischen C und C#? Was sind die Unterschiede und Verbindungen zwischen C und C#? Apr 03, 2025 pm 10:36 PM

Obwohl C und C# Ähnlichkeiten haben, sind sie völlig unterschiedlich: C ist eine prozessorientierte, manuelle Speicherverwaltung und plattformabhängige Sprache, die für die Systemprogrammierung verwendet wird. C# ist eine objektorientierte, Müllsammlung und plattformunabhängige Sprache, die für Desktop-, Webanwendungs- und Spielentwicklung verwendet wird.

Wie benutze ich XPath, um von einem bestimmten DOM -Knoten in JavaScript aus zu suchen? Wie benutze ich XPath, um von einem bestimmten DOM -Knoten in JavaScript aus zu suchen? Apr 04, 2025 pm 11:15 PM

Detaillierte Erläuterung der XPath -Suchmethode unter DOM -Knoten in JavaScript, wir müssen häufig bestimmte Knoten aus dem DOM -Baum basierend auf XPath -Ausdrücken finden. Wenn Sie ...

See all articles