Vue でテーブルをリアルタイムで更新する方法 (2 つの方法)-フロントエンドQ&A-php.cn

Vue でテーブルをリアルタイムで更新する方法 (2 つの方法)

PHPz

リリース： 2023-04-13 11:11:32

オリジナル

6332 人が閲覧しました

Vue プロジェクトでは、テーブルは一般的なコンポーネントであり、ほとんどの場合、テーブルをリアルタイムで更新する必要があります。リアルタイムでテーブルを更新する一般的な方法は、ポーリングを介してバックエンドデータを要求することです。ただし、この方法では不要なネットワークリクエストが発生するため、リクエストが多すぎると Web サイトのパフォーマンスが非常に低下します。したがって、Vue テーブルをリアルタイムで更新するためのより良いソリューションを見つける必要があります。

この記事では、Vue テーブルのリアルタイム更新を実現する 2 つの方法を紹介します。 1 つ目の方法は、WebSocket を使用することです。 2 番目の方法は、Vue のウォッチャーテクノロジを使用することです。次に、これら 2 つの方法を使用して Vue テーブルのリアルタイム更新を実現する方法を紹介します。

1. WebSocket を使用して Vue テーブルのリアルタイム更新を実現します

WebSocket は、クライアントとサーバー間の双方向通信を実現できるネットワーク通信プロトコルです。 Web ページを更新せずに、Web ページのコンテンツを更新できます。したがって、WebSocket を使用して Vue テーブルのリアルタイム更新を実現できます。

WebSocket 接続の作成

Vue プロジェクトでは、Vue コンポーネントで WebSocket 接続を作成できます。

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

ログイン後にコピー

この例では、WebSocket 接続を作成し、onmessage イベントを使用してサーバーから送信されたメッセージに応答します。サーバーがメッセージを送信すると、データリストが更新され、テーブルがレンダリングされます。

サーバー側のコード

サーバー側のコードは次のとおりです:

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

ログイン後にコピー

この例では、WebSocket サーバーを作成し、送信に接続します。成功後のデータ。次に、変更されたユーザーデータを毎秒プッシュします。

2. Vue のウォッチャーテクノロジーを使用して、Vue テーブルのリアルタイム更新を実現します

Vue のウォッチャーテクノロジーは、データの変更を監視し、データの変更時に一部の操作を実行できます。この機能を使用すると、Vue テーブルのリアルタイム更新を実現できます。

ウォッチャーを使用してデータ変更を監視する

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

ログイン後にコピー

この例では、setInterval 関数を使用して、データの age 属性を毎秒更新します。 Vue はデータの変更をリッスンし、データが変更されると DOM の再レンダリングをトリガーします。

2. 結論

この記事では、Vue テーブルのリアルタイム更新を実現する 2 つの方法を紹介しました。 1 つ目の方法は、クライアントとサーバー間の双方向通信を可能にする WebSocket を使用する方法です。 2 番目の方法は、データの変更を監視し、DOM の再レンダリングをトリガーできる Vue のウォッチャーテクノロジーを使用することです。どちらの方法にも独自の長所と短所があります。双方向通信が必要で、複数のクライアントをサポートする必要がある場合は、WebSocket の方が適しています。単純なリアルタイム更新のみが必要な場合は、Vue のウォッチャーテクノロジを使用する方が適しています。

以上がVue でテーブルをリアルタイムで更新する方法 (2 つの方法)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。