Cara memuat semula jadual dalam vue dalam masa nyata (dua cara)

Dalam projek Vue, jadual ialah komponen biasa, dan dalam kebanyakan kes, kami perlu memuat semula jadual dalam masa nyata. Amalan biasa untuk menyegarkan jadual dalam masa nyata ialah meminta data hujung belakang melalui tinjauan pendapat. Walau bagaimanapun, kaedah ini akan membawa kepada permintaan rangkaian yang tidak perlu Jika terdapat terlalu banyak permintaan, prestasi tapak web akan menjadi sangat lemah. Oleh itu, kita perlu mencari penyelesaian yang lebih baik untuk menyegarkan jadual Vue dalam masa nyata.

Dalam artikel ini, kami akan memperkenalkan dua cara untuk mencapai penyegaran masa nyata jadual Vue. Cara pertama ialah menggunakan WebSocket. Cara kedua ialah menggunakan teknologi pemerhati Vue. Seterusnya, kami akan memperkenalkan cara menggunakan kedua-dua kaedah ini untuk mencapai penyegaran masa nyata jadual Vue.

1. Gunakan WebSockets untuk merealisasikan penyegaran masa nyata jadual Vue

WebSocket ialah protokol komunikasi rangkaian yang boleh merealisasikan komunikasi dua hala antara pelanggan dan pelayan. Ia boleh mengemas kini kandungan halaman web tanpa menyegarkan halaman web. Oleh itu, kita boleh menggunakan WebSocket untuk mencapai penyegaran masa nyata jadual Vue.

1. Buat sambungan WebSocket

Dalam projek Vue, kita boleh mencipta sambungan WebSocket dalam komponen 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>

Dalam contoh ini, kami mencipta sambungan WebSocket dan menggunakan acara onmessage untuk membalas mesej yang dihantar oleh pelayan. Apabila pelayan menghantar mesej, kami mengemas kini senarai data dan memberikan jadual.

2. Kod sebelah pelayan

Kod sebelah pelayan kelihatan seperti ini:

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

Dalam contoh ini, kami mencipta pelayan WebSocket dan Hantar data selepas sambungan berjaya. Kemudian tolak data pengguna yang diubah suai setiap saat.

2. Gunakan teknologi pemerhati Vue untuk mencapai penyegaran masa nyata jadual Vue

Teknologi pemerhati Vue boleh memantau perubahan data dan melakukan beberapa operasi apabila data berubah. Menggunakan ciri ini, kami boleh mencapai penyegaran masa nyata jadual Vue.

1. Gunakan pemerhati untuk memantau perubahan data

Dalam komponen Vue, kita boleh menggunakan pemerhati untuk memantau perubahan data.

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

Dalam contoh ini, kami menggunakan fungsi setInterval untuk mengemas kini atribut umur data setiap saat. Vue akan mendengar perubahan data dan mencetuskan pemaparan semula DOM apabila data berubah.

2. Kesimpulan

Dalam artikel ini, kami memperkenalkan dua cara untuk mencapai penyegaran masa nyata jadual Vue. Cara pertama ialah menggunakan WebSocket, yang membolehkan komunikasi dua hala antara klien dan pelayan. Cara kedua ialah menggunakan teknologi pemerhati Vue, yang boleh memantau perubahan data dan mencetuskan pemaparan semula DOM. Kedua-dua kaedah ini mempunyai kelebihan dan kekurangan masing-masing. Jika anda memerlukan komunikasi dua hala dan perlu menyokong berbilang pelanggan, WebSocket ialah pilihan yang lebih sesuai. Jika anda hanya memerlukan penyegaran masa nyata yang ringkas, maka menggunakan teknologi pemerhati Vue adalah pilihan yang lebih sesuai.

Atas ialah kandungan terperinci Cara memuat semula jadual dalam vue dalam masa nyata (dua cara). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!