Heim > Artikel > Web-Frontend > Tipps zur Verwendung von Computed und Watch zur Implementierung der Datenberechnung und -überwachung in Vue
Vue.js ist ein beliebtes JavaScript-Front-End-Framework, das umfangreiche Datenbindungs- und Reaktionsfunktionen bietet und es uns ermöglicht, den Status von Webanwendungen einfach zu verwalten. Darunter sind „computed“ und „watch“ zwei wichtige Datenverarbeitungs- und Überwachungstools in Vue.js. In diesem Artikel wird vorgestellt, wie man sie zur Implementierung von Datenberechnungs- und Überwachungstechniken verwendet.
<template> <div> <p>商品数量: {{ products.length }}</p> <ol> <li v-for="(product, index) in sortedProducts" :key="index"> {{ product.name }} - ${{ product.price }} </li> </ol> </div> </template> <script> export default { data() { return { products: [ { name: "iPhone 12", price: 799 }, { name: "MacBook Air", price: 999 }, { name: "iPad Pro", price: 699 }, { name: "AirPods Pro", price: 249 }, ] } }, computed: { sortedProducts: function() { return this.products.sort((a, b) => a.price - b.price); } } } </script>
Im obigen Beispiel sortieren wir die Produktliste nach der Berechnung von Attributen. Die berechnete Eigenschaft sortedProducts sortiert die Preise der Produkte in aufsteigender Reihenfolge und gibt die sortierten Ergebnisse dann zum Rendern an die v-for-Direktive in der Vorlage zurück.
Es ist zu beachten, dass eine berechnete Eigenschaft nur dann neu berechnet wird, wenn sich die Eigenschaften, von denen sie abhängt, ändern. Selbst wenn wir this.products in der berechneten Eigenschaft sortedProducts verwenden, wird sortedProducts nicht neu berechnet, solange sich die Produkte nicht geändert haben.
1.2 Vorhandene Daten verarbeiten
<template> <div> <p>订单时间: {{ formattedTime }}</p> <button @click="updateTime">更新时间</button> </div> </template> <script> export default { data() { return { orderTime: new Date() } }, computed: { formattedTime: function() { return this.orderTime.toLocaleString(); } }, methods: { updateTime: function() { this.orderTime = new Date(); } } } </script>
Im obigen Beispiel formatieren wir die Bestellzeit durch Berechnen von Attributen in eine lokale Datums- und Uhrzeitzeichenfolge (toLocaleString) und zeigen das formatierte Ergebnis in der Vorlage an. Aufgrund der Art der berechneten Eigenschaften wird formattedTime nur dann neu berechnet, wenn sich orderTime ändert.
2. watch
<template> <div> <p>剩余字符数: {{ charsLeft }}</p> <textarea v-model="text" @keyup="updateChars"></textarea> </div> </template> <script> export default { data() { return { text: "" } }, watch: { text: function(val) { if (val.length > 10) { alert("输入字符数不能超过10个!"); } } }, computed: { charsLeft: function() { return 10 - this.text.length; } }, methods: { updateChars: function() { this.charsLeft = 10 - this.text.length; } } } </script>
Im obigen Beispiel verwenden wir watch, um die Textvariable im Eingabefeld zu überwachen. Wenn die Textlänge 10 Zeichen überschreitet, löst Watch den entsprechenden Vorgang aus und zeigt ein Warnfeld an, um den Benutzer daran zu hindern, die Eingabe fortzusetzen. Gleichzeitig zählen wir die Anzahl der verbleibenden Zeichen anhand des berechneten Attributs. Wir können sehen, dass das berechnete Attribut charsLeft nur dann neu berechnet wird, wenn sich der Text ändert.
Es ist zu beachten, dass die von watch überwachte Variable eine Funktion ist und zwei Parameter erhält: neuer Wert und alter Wert. Basierend auf diesen beiden Parametern können wir entsprechende Operationen durchführen. watch bietet außerdem erweiterte Optionen wie umfassende Überwachung und sofortige Ausführung, die je nach spezifischen Anforderungen konfiguriert werden können.
3. Fazit
Das obige ist der detaillierte Inhalt vonTipps zur Verwendung von Computed und Watch zur Implementierung der Datenberechnung und -überwachung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!