Comment actualiser la table en vue en temps réel (deux manières)

Dans les projets Vue, les tableaux sont un composant courant et dans la plupart des cas, nous devons actualiser le tableau en temps réel. Une pratique courante pour actualiser les tables en temps réel consiste à demander des données backend via une interrogation. Cependant, cette méthode entraînera des requêtes réseau inutiles. S’il y a trop de requêtes, les performances du site Web deviendront très mauvaises. Par conséquent, nous devons trouver une meilleure solution pour actualiser les tables Vue en temps réel.

Dans cet article, nous présenterons deux façons d'actualiser en temps réel les tables Vue. La première consiste à utiliser WebSocket. La deuxième façon consiste à utiliser la technologie d'observation de Vue. Nous présenterons ensuite comment utiliser ces deux méthodes pour obtenir une actualisation en temps réel des tables Vue.

1. Utilisez WebSockets pour actualiser en temps réel les tables Vue

WebSocket est un protocole de communication réseau qui peut établir une communication bidirectionnelle entre le client et le serveur. Il peut mettre à jour le contenu de la page Web sans actualiser la page Web. Par conséquent, nous pouvons utiliser WebSocket pour actualiser en temps réel les tables Vue.

1. Créer une connexion WebSocket

Dans le projet Vue, nous pouvons créer une connexion WebSocket dans le composant Vue.

<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>

Dans cet exemple, nous créons une connexion WebSocket et utilisons l'événement onmessage pour répondre aux messages envoyés par le serveur. Lorsque le serveur envoie un message, nous mettons à jour la liste de données et restituons le tableau.

2. Code côté serveur

Le code côté serveur ressemble à ceci :

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);
});

Dans cet exemple, nous créons un serveur WebSocket et envoyons des données une fois la connexion réussie. Ensuite, transmettez les données utilisateur modifiées toutes les secondes.

2. Utilisez la technologie d'observation de Vue pour actualiser en temps réel les tables Vue

La technologie d'observation de Vue peut surveiller les modifications des données et effectuer certaines opérations lorsque les données changent. Grâce à cette fonctionnalité, nous pouvons réaliser une actualisation en temps réel des tables Vue.

1. Utilisez watcher pour surveiller les modifications des données

Dans le composant Vue, nous pouvons utiliser watcher pour surveiller les modifications des données.

<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>

Dans cet exemple, nous utilisons la fonction setInterval pour mettre à jour l'attribut age des données chaque seconde. Vue écoutera les modifications de données et déclenchera le nouveau rendu DOM lorsque les données changeront.

2. Conclusion

Dans cet article, nous avons présenté deux façons d'actualiser les tables Vue en temps réel. La première consiste à utiliser WebSocket, qui permet une communication bidirectionnelle entre le client et le serveur. La deuxième façon consiste à utiliser la technologie d'observation de Vue, qui peut surveiller les modifications des données et déclencher un nouveau rendu DOM. Les deux méthodes ont leurs propres avantages et inconvénients. Si vous avez besoin d'une communication bidirectionnelle et devez prendre en charge plusieurs clients, WebSocket est un choix plus approprié. Si vous n'avez besoin que d'une simple actualisation en temps réel, l'utilisation de la technologie d'observation de Vue est un choix plus approprié.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!