vue文件中创建和使用worker

1.worker.js文件应放在public文件目录下

// worker.js

onmessage = function (event) {

  postMessage(event.data - 5);

};

2.在父组件内创建worker并使用

  data() {

    return {

      worker: new Worker("/worker.js"),

    }

 

<template>

     Demo:worker="worker" />

</template>

  created() {

    // 监听worker的消息

    this.worker.onmessage = ({ data }) => {

      console.log("父组件接受到的消息：", data);

    };

  },

3.子组件内

props:['worker'],

  created() {

    // 如果子组件从新定义，会覆盖父组件的onmessage方法

    // this.worker.onmessage = ({ data }) => {

    //   console.log("子组件收到的消息:", data);

    // };

  },

  methods: {

    //子组件发送消息：

    sendMessageToWorker() {

      const message = 42; // 示例数据

      this.worker.postMessage({ num: message }); // 发送消息给worker

    },

  },

  beforeDestroy() {

    // 清理资源

    this.worker.terminate();

  },