Vue에서 실시간으로 테이블을 새로 고치는 방법(두 가지 방법)

Vue 프로젝트에서 테이블은 공통 구성 요소이며 대부분의 경우 실시간으로 테이블을 새로 고쳐야 합니다. 실시간으로 테이블을 새로 고치는 일반적인 방법은 폴링을 통해 백엔드 데이터를 요청하는 것입니다. 그러나 이 방법을 사용하면 불필요한 네트워크 요청이 발생하게 되며 요청이 너무 많으면 웹사이트 성능이 매우 저하됩니다. 따라서 Vue 테이블을 실시간으로 새로 고치는 더 나은 솔루션을 찾아야 합니다.

이 기사에서는 Vue 테이블을 실시간으로 새로 고치는 두 가지 방법을 소개합니다. 첫 번째 방법은 WebSocket을 사용하는 것입니다. 두 번째 방법은 Vue의 watcher 기술을 사용하는 것입니다. 다음으로 이 두 가지 방법을 사용하여 Vue 테이블을 실시간으로 새로 고치는 방법을 소개합니다.

1. WebSocket을 사용하여 Vue 테이블의 실시간 새로 고침을 달성합니다.

WebSocket은 클라이언트와 서버 간의 양방향 통신을 달성할 수 있는 네트워크 통신 프로토콜입니다. 웹페이지를 새로 고치지 않고도 웹페이지의 내용을 업데이트할 수 있습니다. 따라서 WebSocket을 사용하여 Vue 테이블을 실시간으로 새로 고칠 수 있습니다.

1. 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 이벤트를 사용하여 서버에서 보낸 메시지에 응답합니다. 서버가 메시지를 보내면 데이터 목록을 업데이트하고 테이블을 렌더링합니다.

2. 서버측 코드

서버측 코드는 다음과 같습니다.

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 테이블을 실시간으로 새로 고칠 수 있습니다.

1. watcher를 사용하여 데이터 변경 사항 모니터링

Vue 구성 요소에서는 watcher를 사용하여 데이터 변경 사항을 모니터링할 수 있습니다.

<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 테이블을 실시간으로 새로 고치는 두 가지 방법을 소개했습니다. 첫 번째 방법은 클라이언트와 서버 간의 양방향 통신을 가능하게 하는 WebSocket을 사용하는 것입니다. 두 번째 방법은 데이터 변경 사항을 모니터링하고 DOM 재렌더링을 트리거할 수 있는 Vue의 감시자 기술을 사용하는 것입니다. 두 가지 방법 모두 장점과 단점이 있습니다. 양방향 통신이 필요하고 여러 클라이언트를 지원해야 하는 경우 WebSocket이 더 적합한 선택입니다. 간단한 실시간 새로 고침만 필요한 경우 Vue의 감시자 기술을 사용하는 것이 더 적합한 선택입니다.

위 내용은 Vue에서 실시간으로 테이블을 새로 고치는 방법(두 가지 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!