So aktualisieren Sie die Tabelle in Vue in Echtzeit (zwei Möglichkeiten)

In Vue-Projekten sind Tabellen eine häufige Komponente und in den meisten Fällen müssen wir die Tabelle in Echtzeit aktualisieren. Eine gängige Praxis zum Aktualisieren von Tabellen in Echtzeit besteht darin, Backend-Daten per Abfrage anzufordern. Allerdings führt diese Methode zu unnötigen Netzwerkanfragen, wenn es zu viele Anfragen gibt, wird die Leistung der Website sehr schlecht. Daher müssen wir eine bessere Lösung finden, um Vue-Tabellen in Echtzeit zu aktualisieren.

In diesem Artikel stellen wir zwei Möglichkeiten vor, um eine Aktualisierung von Vue-Tabellen in Echtzeit zu erreichen. Die erste Möglichkeit besteht darin, WebSocket zu verwenden. Die zweite Möglichkeit besteht darin, die Watcher-Technologie von Vue zu verwenden. Als Nächstes stellen wir vor, wie Sie mit diesen beiden Methoden eine Echtzeitaktualisierung von Vue-Tabellen erreichen.

1. Verwenden Sie WebSockets, um eine Echtzeitaktualisierung von Vue-Tabellen zu erreichen.

WebSocket ist ein Netzwerkkommunikationsprotokoll, das eine bidirektionale Kommunikation zwischen dem Client und dem Server erreichen kann. Es kann den Inhalt der Webseite aktualisieren, ohne die Webseite zu aktualisieren. Daher können wir WebSocket verwenden, um eine Echtzeitaktualisierung von Vue-Tabellen zu erreichen.

1. WebSocket-Verbindung erstellen

Im Vue-Projekt können wir eine WebSocket-Verbindung in der Vue-Komponente erstellen.

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import WebSocket from 'websocket';

export default {
  data() {
    return {
      users: []
    }
  },
  
  created() {
    const ws = new WebSocket('ws://localhost:8080');
    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      this.users = data.users;
    }
  }
}
</script>

In diesem Beispiel erstellen wir eine WebSocket-Verbindung und verwenden das onmessage-Ereignis, um auf vom Server gesendete Nachrichten zu antworten. Wenn der Server eine Nachricht sendet, aktualisieren wir die Datenliste und rendern die Tabelle.

2. Serverseitiger Code

Der serverseitige Code sieht folgendermaßen aus:

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

// 模拟用户数据
const users = [
  { id: 1, name: '张三', age: 18 },
  { id: 2, name: '李四', age: 19 },
  { id: 3, name: '王五', age: 20 }
];

wss.on('connection', (ws) => {
  // 发送数据
  ws.send(JSON.stringify({ users }));
  
  // 定时推送数据
  setInterval(() => {
    users.forEach((user) => {
      user.age += 1;
    });
    ws.send(JSON.stringify({ users }));
  }, 1000);
});

In diesem Beispiel erstellen wir einen WebSocket-Server und senden Daten, nachdem die Verbindung erfolgreich ist. Anschließend werden die geänderten Benutzerdaten jede Sekunde übertragen.

2. Verwenden Sie die Watcher-Technologie von Vue, um eine Echtzeitaktualisierung von Vue-Tabellen zu erreichen.

Die Watcher-Technologie von Vue kann Datenänderungen überwachen und einige Vorgänge ausführen, wenn sich die Daten ändern. Mit dieser Funktion können wir eine Echtzeitaktualisierung von Vue-Tabellen erreichen.

1. Verwenden Sie Watcher, um Datenänderungen zu überwachen

In der Vue-Komponente können wir Watcher verwenden, um Datenänderungen zu überwachen.

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 19 },
        { id: 3, name: '王五', age: 20 }
      ]
    }
  },
  
  created() {
    this.watchData();
  },
  
  methods: {
    watchData() {
      setInterval(() => {
        this.users.forEach((user) => {
          user.age += 1;
        });
      }, 1000);
    }
  }
}
</script>

In diesem Beispiel verwenden wir die Funktion setInterval, um das Altersattribut der Daten jede Sekunde zu aktualisieren. Vue wartet auf Datenänderungen und löst ein erneutes Rendern des DOM aus, wenn sich die Daten ändern.

2. Fazit

In diesem Artikel haben wir zwei Möglichkeiten vorgestellt, um eine Echtzeitaktualisierung von Vue-Tabellen zu erreichen. Die erste Möglichkeit besteht darin, WebSocket zu verwenden, das eine bidirektionale Kommunikation zwischen dem Client und dem Server ermöglicht. Die zweite Möglichkeit besteht darin, die Watcher-Technologie von Vue zu verwenden, die Datenänderungen überwachen und ein erneutes Rendern des DOM auslösen kann. Beide Methoden haben ihre eigenen Vor- und Nachteile. Wenn Sie eine bidirektionale Kommunikation benötigen und mehrere Clients unterstützen müssen, ist WebSocket die geeignetere Wahl. Wenn Sie nur eine einfache Aktualisierung in Echtzeit benötigen, ist die Verwendung der Watcher-Technologie von Vue die geeignetere Wahl.

Das obige ist der detaillierte Inhalt vonSo aktualisieren Sie die Tabelle in Vue in Echtzeit (zwei Möglichkeiten). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!