Heim >Web-Frontend >js-Tutorial >Die Verwendung und der Unterschied zwischen Computed und Watch in Vue
Die Verwendung und der Unterschied zwischen Computed und Watch in Vue
- angryTomOriginal
- 2020-02-07 17:37:272118Durchsuche
In diesem Artikel wird der Unterschied zwischen dem berechneten Attribut und der Überwachungsattributüberwachung in Vue vorgestellt. Ich hoffe, dass er für Studenten hilfreich sein wird, die das Vue-Front-End-Framework erlernen!
1. Berechnete Attribute (berechnet)
1. Berechnete Attribute werden verwendet, um Ausdrücke in Vorlagen prägnant und einfach zu pflegen . Im Einklang mit der ursprünglichen Entwurfsabsicht für einfache Berechnungen.
Zum Beispiel:
<p id="app">
{{ myname.substring(0,1).toUpperCase() + myname.substring(1) }}
</p>Die Operation ist zu komplex, langwierig und schwer zu warten, daher sollten wir berechnete Attribute verwenden, um komplexe Operationen zu schreiben.
Daher kann es wie folgt umgeschrieben werden:
rrreeZusammenfassung:
1. Variablen werden nicht in Daten definiert, sondern in berechneten. Die Schreibmethode ist dieselbe als Methode, und es gibt einen Rückgabewert. Der Funktionsname wird direkt in der Seitenvorlage ohne Klammern gerendert.
2. Aktualisieren Sie die Ergebnisse entsprechend den Änderungen in den übergebenen Variablen.
3. Berechnete Eigenschaften werden basierend auf reaktionsfähigen Abhängigkeiten zwischengespeichert. Wenn sich einer der Werte nicht geändert hat, werden die zwischengespeicherten Daten der letzten Berechnung aufgerufen und so die Leistung des Programms verbessert. Methoden werden bei jedem Aufruf neu berechnet. Um unnötige Ressourcen zu verbrauchen, verwenden wir berechnete Attribute.
Beispiel für eine Fuzzy-Abfrage für berechnete Attribute:
<body>
<div id="app">
{{ changewords }} // 渲染 不用写()
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data:{},
// 计算属性
computed:{
changewords(){
return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
}
}
})
</script>2. Überwachungsattribute (beobachten)
Wenn es um die oben genannten berechneten Attribute geht, während der Initialisierung Es kann überwacht und berechnet werden, die Uhr wird jedoch nur dann ausgelöst, wenn eine Änderung vorliegt.
Wenn Sie einige Daten haben, die sich ändern müssen, während sich andere Daten ändern, oder wenn Sie asynchrone oder teure Vorgänge ausführen müssen, wenn sich die Daten ändern, können Sie watch verwenden.
Beispiel:
<body>
<div id="app">
<input type="text" v-model="mytext">
<ul>
<li v-for="data in datalistcom" :key="data">
{{ data }}
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data:{
datalist:["aaa","bbb","ccc","ddd","aa","a","cc","dd"],
mytext:''
},
computed:{
datalistcom(){
return this.datalist.filter(item=>item.indexOf(this.mytext)>-1)
}
}
})
</script>Der Unterschied zwischen berechneten Eigenschaften und Eigenschaftsüberwachung:
1. Berechnete Eigenschaftsvariablen werden in „berechnet“ definiert, und Eigenschaftsüberwachung ist in der Datendefinition.
2. Berechnete Attribute sind deklarative Beschreibungen eines Werts, der von anderen Werten abhängt. Wenn sich der abhängige Wert ändert, wird das Ergebnis neu berechnet und das DOM aktualisiert. Attribute hören auf definierte Variablen. Wenn sich der definierte Wert ändert, wird die entsprechende Funktion ausgeführt.
Das obige ist der detaillierte Inhalt vonDie Verwendung und der Unterschied zwischen Computed und Watch in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!