So erreichen Sie Echtzeit-Push und -Aktualisierung von Daten in der Vue-Technologieentwicklung
Mit der kontinuierlichen Entwicklung des Internets sind Echtzeit-Daten-Push und -Aktualisierung zu wichtigen Anforderungen in der modernen Webanwendungsentwicklung geworden. Als beliebtes Front-End-Entwicklungsframework bietet Vue auch einige Mechanismen und Tools, die uns dabei helfen können, Daten in Echtzeit zu pushen und zu aktualisieren. In diesem Artikel werden einige häufig verwendete Methoden vorgestellt und spezifische Codebeispiele bereitgestellt, um deren Verwendung zu demonstrieren.
Der Reaktionsmechanismus von Vue ist eine der wichtigsten Funktionen von Vue. Durch die Verwendung der reaktiven Datenbindung von Vue in Komponenten können wir Datenänderungen einfach verfolgen und den Inhalt der Seite zeitnah aktualisieren. Hier ist ein einfaches Beispiel:
<p>{{ message }}</p>
<button @click="updateMessage">更新数据</button>
<script><br>export default {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { message: 'Hello, Vue!' }</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p> } ,<br> Methoden: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>updateMessage() { this.message = 'Hello, World!' }</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>}<br>}<br></script>
Im obigen Beispiel haben wir eine Eigenschaft namens message in den Daten der Komponente definiert und sie an das in einem p-Tag gebunden. Wenn auf die Schaltfläche geklickt wird, wird die updateMessage-Methode aufgerufen und der Wert der Nachricht auf „Hello, World!“ aktualisiert. Da es sich bei Nachrichten um responsive Daten handelt, die von Vue verfolgt werden, wird der Inhalt der Seite automatisch aktualisiert.
Zusätzlich zum Reaktionsmechanismus stellt Vue auch das Watch-Attribut bereit, mit dem Datenänderungen überwacht und entsprechende Vorgänge ausgeführt werden können. Mit watch können wir Echtzeitdaten überwachen und verarbeiten. Hier ist ein Beispiel:
<p>{{ message }}</p>
<script><br>export default {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { message: '' }</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><p>}, <br> watch: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>message(newValue, oldValue) { console.log(`新值:${newValue},旧值:${oldValue}`) }</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>},<br> Mounted() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// 模拟异步请求数据 setTimeout(() => { this.message = '你好,Vue!' }, 2000)</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>}<br>}<br></script>
Im obigen Beispiel verwenden wir watch, um Änderungen in der Nachricht zu überwachen und zu drucken, wenn sich der Nachrichtenwert ändert der neue Wert und der alte Wert. Im gemounteten Lebenszyklus-Hook der Komponente verwenden wir setTimeout, um asynchrone Anforderungsdaten zu simulieren und die Daten in der Nachricht zu aktualisieren. Wenn die Daten aktualisiert werden, löst die Uhr automatisch entsprechende Vorgänge aus und führt diese aus.
Zusätzlich zu den beiden oben genannten Methoden können wir auch einige spezialisierte Bibliotheken von Drittanbietern verwenden, um einen Daten-Push in Echtzeit zu erreichen. Mit dem Vue-socket.io-Plug-in können wir beispielsweise eine bidirektionale Datenkommunikation in Echtzeit über Websocket erreichen.
Zuerst müssen wir das Vue-socket.io-Plug-in installieren:
npm install vue-socket.io --save
Dann führen wir das Plug-in ein und initialisieren es in der Eintragsdatei der Vue-Anwendung , wie folgt:
VueSocketIO aus 'vue-socket.io' importieren
Socketio aus 'socket.io-client' importieren
Vue.use(new VueSocketIO({
debug: true,
Connection: socketio('http: //localhost:3000')
}))
Als nächstes verwenden Sie die vom Plug-in in der Komponente bereitgestellte Socket-Instanz, um Ereignisse vom Server abzuhören und die Daten zu aktualisieren. Hier ist ein Beispiel:
<p>{{ message }}</p>