vue中怎么使用原生websocket

在Vue中使用原生WebSocket需要先创建WebSocket对象，然后在Vue的生命周期函数中监听WebSocket的事件并更新数据。下面是一个简单的示例代码：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.websocket = new WebSocket('ws://localhost:8080')
    this.websocket.addEventListener('message', this.handleMessage)
  },
  methods: {
    handleMessage(event) {
      this.message = event.data
    }
  },
  beforeDestroy() {
    this.websocket.close()
  }
}
</script>

在mounted钩子函数中创建WebSocket对象，并监听message事件。当WebSocket接收到消息时，调用handleMessage方法更新数据。在beforeDestroy钩子函数中关闭WebSocket连接。

需要注意的是，在Vue中使用WebSocket时，需要将WebSocket对象存储在组件的实例属性中，这样才能在组件销毁时关闭WebSocket连接。