webworker在js与vue中的使用

var worker1 = new Worker('worker1.js');

worker1.postMessage('Hello World1');

worker1.onmessage = function (event) {

    console.log('Received worker1 message ' + event.data);

}

var worker2 = new Worker('worker2.js');

worker2.postMessage('Hello World2');

worker2.onmessage = function (event) {

    console.log('Received worker2 message ' + event.data);

}

worker1.js

onmessage = function (event) {

    console.log("worker1 onmessage");

    test();

}



function test() {

    for (var i = 0; i < 20; i++) {

        console.log("worker1:" + i);

        postMessage("worker1:" + i);

    }

}
           

worker2.js

onmessage = function (event) {

    console.log("worker2 onmessage");

    test();

}



function test() {

    for (var i = 0; i < 20; i++) {

        console.log("worker2:" + i);

        postMessage("worker2:" + i);

    }

}
           

worker.js在vue中的使用

import railWayWorker from "../../scripts/railway.worker.js";

let worker = new railWayWorker();

worker.name = "worker" + name;

worker.postMessage("主线程发送数据给子线程");

worker.onmessage = function (e) {

    console.log("接收到worker子线程返回的数据");

};

子线程

railway.worker.js

onmessage = function (event) {

    console.log("接收到主线程发来的消息");

    let para = event.data;

    init(para);

}

init:function(){

     postMessage("发送消息给主线程");

}

Vue 使用worker需要vue-worker插件

vue-worker