How to refresh the table in vue in real time (two ways)

In Vue projects, tables are a common component, and in most cases, we need to refresh the table in real time. A common practice for refreshing tables in real time is to request backend data via polling. However, this method will lead to unnecessary network requests. If there are too many requests, the performance of the website will become very poor. Therefore, we need to find a better solution to refresh Vue tables in real time.

In this article, we will introduce two ways to achieve real-time refresh of Vue tables. The first way is to use WebSocket. The second way is to use Vue's watcher technology. Next, we will introduce how to use these two methods to achieve real-time refresh of Vue tables.

1. Use WebSockets to realize real-time refresh of Vue tables

WebSocket is a network communication protocol that can realize two-way communication between the client and the server. It can update the content of a web page without refreshing the web page. Therefore, we can use WebSocket to achieve real-time refresh of Vue tables.

1. Create WebSocket connection

In the Vue project, we can create a WebSocket connection in the Vue component.

<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 this example, we create a WebSocket connection and use the onmessage event to respond to messages sent by the server. When the server sends a message, we update the data list and render the table.

2. Server-side code

The server-side code is as follows:

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 this example, we create a WebSocket server and connect Send data after success. Then push the modified user data every second.

2. Use Vue’s watcher technology to achieve real-time refresh of Vue tables

Vue’s watcher technology can monitor data changes and perform some operations when the data changes. Using this feature, we can realize real-time refresh of Vue tables.

1. Use watcher to monitor data changes

In the Vue component, we can use watcher to monitor data changes.

<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 this example, we use the setInterval function to update the age attribute of the data every second. Vue will listen for data changes and trigger DOM re-rendering when the data changes.

2. Conclusion

In this article, we introduced two ways to achieve real-time refresh of Vue tables. The first way is to use WebSocket, which enables two-way communication between the client and the server. The second way is to use Vue's watcher technology, which can monitor data changes and trigger DOM re-rendering. Both methods have their own advantages and disadvantages. If you require two-way communication and need to support multiple clients, WebSocket is a more suitable choice. If you only need simple real-time refresh, then using Vue's watcher technology is a more suitable choice.

The above is the detailed content of How to refresh the table in vue in real time (two ways). For more information, please follow other related articles on the PHP Chinese website!