sendMessage (functionKey, data) { const timestamp = ${Date.now()} const messageId = ${this.account}_${functionKey}_${timestamp} return publish(${this.device.productId}/${this.device.id}/status/ask, JSON.stringify({ messageId, timestamp, functionKey, data }), true).then(() => messageId) }, onMessage (topic, message) { console.log('0000', topic) const result = topic.match(/^(\d+)/(\d+)/status/reply$/) if (result) { const { productId, id } = this.device if (productId === result[1] && id === result[2]) { message = JSON.parse(message) // 处理回调 // todo const tasks = this.transfromDataToTask(message) this.tasks = tasks this.hasChanged = true console.log('222', message) } } },使用上述的两个mqtt消息格式的代码，把数据渲染到vue页面上，js代码

首先，在Vue组件中定义数据tasks和hasChanged，用于存储从MQTT消息中获取的数据和标识数据是否发生变化。

<template>
  <div>
    <ul>
      <li v-for="task in tasks" :key="task.messageId">
        {{ task.functionKey }}: {{ task.data }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [],
      hasChanged: false,
    };
  },
  created() {
    // 在此处添加MQTT消息订阅
  },
};
</script>

然后，在组件的created生命周期函数中，使用MQTT.js库进行连接和订阅，代码如下：

import mqtt from "mqtt";

export default {
  data() {
    return {
      tasks: [],
      hasChanged: false,
    };
  },
  created() {
    const client = mqtt.connect("mqtt://localhost:1883"); // 连接MQTT服务器

    client.on("connect", () => {
      console.log("MQTT连接成功！");
      client.subscribe(`${this.device.productId}/${this.device.id}/status/reply`); // 订阅MQTT消息
    });

    client.on("message", (topic, message) => {
      console.log("MQTT收到消息！", topic, message.toString());
      const result = topic.match(/^(\d+)\/(\d+)\/status\/reply$/);
      if (result) {
        const { productId, id } = this.device;
        if (productId === result[1] && id === result[2]) {
          message = JSON.parse(message);
          const tasks = this.transfromDataToTask(message);
          this.tasks = tasks;
          this.hasChanged = true;
        }
      }
    });
  },
};

其中，transfromDataToTask是一个将MQTT消息中的数据转换为任务列表的方法，根据具体业务需求来实现。在收到MQTT消息后，调用该方法将数据转换为任务列表，并将数据存储到组件的tasks属性中，同时将hasChanged属性设置为true，以触发Vue的响应式更新机制，从而将数据渲染到页面上。