Vue-worker是一個(gè)新的Vue插件，它提供了多線程工作機(jī)制，可以在Vue項(xiàng)目中實(shí)現(xiàn)多線程的異步操作，由于JavaScript是單線程的，Mono-thread的執(zhí)行方式，當(dāng)我們進(jìn)行一些需要很長(zhǎng)時(shí)間的操作，如計(jì)算，查詢等，或者需要處理大數(shù)據(jù)量時(shí)，執(zhí)行時(shí)會(huì)占用瀏覽器的主線程，導(dǎo)致瀏覽器假死。這時(shí)用Vue-worker可以將這些操作轉(zhuǎn)移到后臺(tái)線程中執(zhí)行，保證用戶的瀏覽不受影響。

在Vue項(xiàng)目中使用Vue-worker，首先需要下載和安裝Vue-worker。首先使用npm對(duì)Vue-worker進(jìn)行下載

npm install vue-worker --save

在Vue項(xiàng)目中，使用ES6的import語(yǔ)句引入Vue和Vue-worker的插件，然后在Vue實(shí)例中調(diào)用Vue工具類方法Vue.use()，將Vue-worker作為Vue實(shí)例的插件使用。使用Vue-worker的時(shí)候，需要在workers目錄下，新建一個(gè).js文件，其名稱對(duì)應(yīng)workers的名稱，并在其內(nèi)部定義一個(gè)自己想要執(zhí)行的方法，然后使用importScripts載入The Minified Standalone Version的Vue-Worker插件。最后使用Vue.$worker創(chuàng)建一個(gè)Worker實(shí)例，將this傳輸?shù)絎orker中，在Worker中調(diào)用對(duì)應(yīng)的方法并傳入this，可以進(jìn)行多線程的調(diào)用。

import Vue from 'vue'
import VueWorker from 'vue-worker'
Vue.use(VueWorker);
export default {
name: "demoWorker",
methods: {
workerTest(){
const worker = new Vue.$worker('./demo.worker.js');
worker.onmessage = e =>{
console.log(e.data);
}
worker.postMessage(this._data);
}
}
}

可以在Worker中編寫(xiě)我們需要異步執(zhí)行的代碼，在異步代碼中使用postMessage方法向主程序發(fā)送回應(yīng)消息onmessage，然后在主程序中使用onmessage方法進(jìn)行異步消息的接收。

onmessage = e =>{
const val = e.data
const result = (()=>{
// Do something synchronously(e.g. fibonacci)
})();
postMessage(result);
}

需要注意的是Worker中無(wú)法訪問(wèn)DOM元素，因?yàn)樗\(yùn)行在全局域中而不是在主文檔域中。但是通過(guò)postMessage和onmessage進(jìn)行兩者之間的通信是可能的。

總結(jié)起來(lái)，Vue-worker插件使得開(kāi)發(fā)人員可以將一些費(fèi)時(shí)或者需要大量數(shù)據(jù)處理的工作在后臺(tái)線程中進(jìn)行執(zhí)行，這大大提升了用戶體驗(yàn)和項(xiàng)目的性能，同時(shí)也大大節(jié)約了瀏覽器資源的利用率，是一個(gè)非常優(yōu)秀的Vue插件。