In Vue ist datengesteuert die Kernidee. Wenn wir also die Daten der Komponente ändern, müssen wir die Ansicht rechtzeitig aktualisieren, um den Effekt der dynamischen Anzeige der Front-End-Seite zu erzielen. Vue bietet einen sehr praktischen Mechanismus, um bei Datenänderungen automatisch entsprechende Ereignisse auszulösen, der üblicherweise als Listener bezeichnet wird.
Hier stellen wir die relevanten Wissenspunkte zu Ereignissen vor, die ausgelöst werden, wenn sich der Wert in Vue ändert, um den Lesern zu helfen, die zugehörigen Funktionen von Vue besser zu verstehen und anzuwenden.
Vue bietet eine Vielzahl von Möglichkeiten zur Überwachung von Datenänderungen, einschließlich berechneter, überwachter, Methoden usw. Im Folgenden stellen wir die Verwendung und Eigenschaften dieser Methoden vor.
1.1 berechnet
berechnet ist ein sehr wichtiges Attribut in Vue. Nach dem Definieren des berechneten Attributs in einer Komponente berechnet Vue automatisch den Wert des Attributs, wenn die Komponente gerendert wird, und aktualisiert die Ansicht automatisch, wenn sich der Attributwert ändert .
Das Folgende ist ein berechnetes Beispiel:
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}Wenn sich in diesem Beispiel der Wert von firstName oder lastName ändert, berechnet Vue den Wert von fullName neu und aktualisiert die entsprechende Ansicht.
1.2 watch
watch ist eine weitere Möglichkeit, Datenänderungen zu überwachen. Es wird hauptsächlich verwendet, um Änderungen an einem bestimmten Wert zu überwachen und bei Änderungen eine bestimmte Logik auszuführen. Anders als bei der Berechnung muss Watch separat definiert werden, wie unten gezeigt:
watch: {
firstName: function (newValue, oldValue) {
console.log('firstName changed from ' + oldValue + ' to ' + newValue)
}
}Wenn sich in diesem Beispiel der Wert von firstName ändert, führt Vue automatisch die in Watch definierte Logik aus und gibt die entsprechenden Protokollinformationen aus.
1.3 Methoden
Methoden sind ein Attribut, mit dem die Methode des Komponentenbetriebs definiert wird. Beim Aufrufen der Methode können Sie die Komponentendaten direkt ändern und die entsprechende Ansichtsaktualisierung auslösen. Obwohl diese Methode weniger praktisch ist, ist sie in einigen speziellen Szenarien sehr praktisch.
Das Folgende ist ein Beispiel für das Methodenattribut:
methods: {
changeName: function () {
this.firstName = 'NewName'
}
}In diesem Beispiel ändert Vue beim Aufruf der Methode „changeName“ automatisch den Wert von „firstName“ und löst eine Ansichtsaktualisierung aus.
In der tatsächlichen Entwicklung müssen wir häufig einige entsprechende Ereignisse auslösen, wenn sich Daten ändern, um Geschäftsanforderungen zu erfüllen, z. B. Echtzeitsuche usw. Im Folgenden kombinieren wir spezifische Szenarien, um vorzustellen, wie die im vorherigen Artikel eingeführte Methode zur Überwachung von Datenänderungen verwendet werden kann, um Ereignisse zu implementieren, die Wertänderungen auslösen.
2.1 Echtzeitsuche
In der tatsächlichen Entwicklung müssen wir normalerweise eine Echtzeitsuchfunktion im Eingabefeld implementieren. Angenommen, wir haben eine Benutzerlistenseite und müssen die entsprechende Benutzerliste in Echtzeit durchsuchen, nachdem der Benutzer ein Schlüsselwort eingegeben hat. Das Folgende ist ein Beispielcode, der eine Echtzeitsuche basierend auf Watch implementiert:
<template>
<div>
<input type="text" v-model="keyword" />
<ul>
<li v-for="user in filteredUsers">{{user.name}}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
keyword: '',
users: [
{name: 'Tom'},
{name: 'Jerry'},
{name: 'Alice'},
{name: 'Bob'}
]
}
},
computed: {
filteredUsers: function () {
return this.users.filter(user => user.name.indexOf(this.keyword) !== -1)
}
},
}
</script>In diesem Beispiel verwenden wir Watch, um Änderungen im Schlüsselwortattribut zu überwachen und das filteredUsers-Attribut neu zu berechnen, wenn es sich ändert, wodurch die Echtzeitsuchfunktion realisiert wird . Diese Methode lässt sich sehr einfach auf die tatsächliche Frontend-Entwicklung anwenden.
2.2 Formularüberprüfung
Bei der Entwicklung von Formularseiten müssen wir häufig den vom Benutzer eingegebenen Inhalt überprüfen und entsprechende prompte Informationen bereitstellen. Das Folgende ist ein Beispielcode, der die Formularvalidierung basierend auf der Berechnung implementiert:
<template>
<div>
<input type="text" v-model="username" />
<div v-if="isValidUsername">{{username}} is valid</div>
<div v-else>{{username}} is invalid</div>
</div>
</template>
<script>
export default {
data () {
return {
username: ''
}
},
computed: {
isValidUsername: function () {
return this.username.length >= 6
}
},
}
</script>In diesem Beispiel berechnen wir den Wert des Attributs „isValidUsername“ mithilfe der Berechnung und aktualisieren die entsprechende Ansicht, wenn sich der Wert ändert. Diese Methode kann die Formularvalidierung durch einfachen Code implementieren und Benutzern benutzerfreundliche Eingabeaufforderungsinformationen bereitstellen.
Das Auslösen von Ereignissen bei Wertänderungen ist eine der sehr wichtigen Funktionen des Vue-Frameworks. Durch die Überwachung von Datenänderungen können wir problemlos eine dynamische Anzeige und Interaktion der Front-End-Seite realisieren. In praktischen Anwendungen müssen wir die geeignete Überwachungsmethode für bestimmte Szenarien auswählen und die Codeimplementierung basierend auf den Eigenschaften der Komponenten optimieren. Gleichzeitig müssen wir auch auf die Auswirkungen der Zuhörer auf die Leistung achten, um Leistungsprobleme zu vermeiden, die durch die übermäßige Verwendung von Zuhörern verursacht werden.
Das obige ist der detaillierte Inhalt vonLassen Sie uns über Triggerereignisse für Vue-Wertänderungen sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
