一般使用worker都是单独执行一个js脚本文件;最近发现一个vue插件,vue-worker,支持了传入一个方法,就可以让这个方法在worker线程执行;使用worker更加方便;
文档地址:
vue-worker地址:www.npmjs.com/package/vue…
引入:
vue2引入
import Vue from 'vue'
import VueWorker from 'vue-worker'
Vue.use(VueWorker)
vue3引入
import vueWorker from 'simple-web-worker'
主要用到run和create方法:
func是在worker中运行的函数;
[args]是函数需要的参数,用数组盛放;
this.$worker.run((a, b) => {
return a+b;
}, [1,2])
.then(res => {
console.log(res) // 3
})
.catch(err => {
console.log(err)
})
this.$worker.create( [actions]? )
如果打算重用worker,需要用create
它生成一个实例,
通过它的postMessage()或postAll()方法运行确定的操作。
const actions = [
{ message: 'func1', func: () => `Worker 1: Working on func1` },
{ message: 'func2', func: arg => `Worker 2: ${arg}` },
{ message: 'func3', func: arg => `Worker 3: ${arg}` },
{ message: 'func4', func: (arg = 'Working on func4') => `Worker 4: ${arg}` }
]
let worker = this.$worker.create(actions)
worker.postMessage('func1')
.then(console.log) // logs 'Worker 1: Working on func1'
.catch(console.error) // logs any possible error
worker.postMessage('func1', ['Ignored', 'arguments'])
.then(console.log) // logs 'Worker 1: Working on func1'
.catch(console.error) // logs any possible error
worker.postMessage('func2')
.then(console.log) // logs 'Worker 2: undefined'
.catch(console.error) // logs any possible error
worker.postMessage('func3', ['Working on func3'])
.then(console.log) // logs 'Worker 3: Working on func3'
.catch(console.error) // logs any possible error
worker.postMessage('func4')
.then(console.log) // logs 'Worker 4: Working on func4'
.catch(console.error) // logs any possible error
worker.postMessage('func4', ['Overwrited argument'])
.then(console.log) // logs 'Worker 4: Overwrited argument'
.catch(console.error) // logs any possible error