vue 通过websocket获取新值时变换新值样式

要实现通过 WebSocket 获取新值并变换新值样式，一种简单的方法是在 Vue 组件中使用 computed 属性监听 WebSocket 返回的新值，然后根据新值的变化更新组件的样式。

首先，在 Vue 组件的 created 生命周期中创建 WebSocket 连接，并在 WebSocket 的 onmessage 回调函数中将返回的新值保存到组件的 data 中：

created() {
  this.websocket = new WebSocket('ws://example.com');
  this.websocket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    this.newValue = data.value;
  };
},
data() {
  return {
    newValue: null,
  };
},

接下来，在组件的 computed 属性中监听 newValue 的变化，并返回一个对象，包含旧值和新值的信息，以及一个用于改变样式的方法：

computed: {
  styleObject() {
    const oldValue = this.oldValue;
    const newValue = this.newValue;
    this.oldValue = this.newValue;
    return {
      oldValue: oldValue,
      newValue: newValue,
      changeStyle: function() {
        // 根据新值改变样式的代码
      },
    };
  },
},
data() {
  return {
    oldValue: null,
    newValue: null,
  };
},

最后，在模板中使用 styleObject 对象中的属性和方法来更新组件的样式：

<template>
  <div :style="styleObject.changeStyle()">
    <p>旧值：{{ styleObject.oldValue }}</p>
    <p>新值：{{ styleObject.newValue }}</p>
  </div>
</template>