【前端】多线程 worker

VUE3  引用

npm install worker-loader
 

vue.config.js文件的defineConfig里加上配置参数

  chainWebpack: config => {config.module.rule('worker-loader').test(/\.worker\.js$/).use({loader: 'worker-loader',options: {inline: true}}).loader('worker-loader').end()}

先在src目录下新建workers文件夹,接着在里面新建worker.js,在js文件里添加下面的测试代码:

addEventListener('message', e => {const { data } = econsole.log(data)setTimeout(() => {return postMessage('线程完成')}, 1000)
})
export default {}

测试

<template><div><h1>vue3-Worker</h1><button @click="openWorker">开启线程</button><p>F12打开浏览器控制台查看效果</p></div>
</template><script setup>
import Worker from 'worker-loader!@/workers/worker'
const openWorker = () => {const worker = new Worker()worker.postMessage('开启线程')worker.onmessage = e => {console.log(e.data)setTimeout(() => {worker.postMessage('线程关闭')worker.terminate()}, 1000)}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/188877.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言错误处理之 “<errno.h>与<error.h>”

目录 前言 错误号处理方式 errno.h头文件 error.h头文件 参数解释&#xff1a; 关于的”__attribute__“解释&#xff1a; 关于“属性”的解释&#xff1a; 实例一&#xff1a; 实例二&#xff1a; error.h与errno.h的区别 补充内容&#xff1a; 前言 在开始学习…

后仿真 ERROR

后仿真 error ERROR (SFE-23): "input.scs" 252: The instance _57_D32_noxref is referencing an undefined model or subcircuit, parasitic_nwd. Either include the file containing the definition of parasitic_nwd, or define parasitic_nwd before running t…

VUE2+THREE.JS点击事件

THREE.JS点击事件 1.增加监听点击事件2.点击事件实现3.记得关闭页面时 销毁此监听事件 1.增加监听点击事件 renderer.domElement.addEventListener("click", this.onClick, false); 注:初始化render时监听 2.点击事件实现 onClick(event) {const raycaster new …

LV.12 D21 PWM实验 学习笔记

一、PWD简介 1.1 蜂鸣器工作原理 有源蜂鸣器 有源蜂鸣器只要接上额定电源就可以发出声音 无源蜂鸣器 无源蜂鸣器利用电磁感应原理&#xff0c;为音圈接入交变电流后形成的电磁铁与永磁铁相吸或相斥而推动振膜发声 1.2 使用GPIO控制 while(1) { GPX2.DATGPX2.D…

Python中用于机器学习的Lazy Predict库

Python是一种多功能语言&#xff0c;你可以用它来做任何事情。Python的一个伟大之处在于&#xff0c;有这么多的库使它变得更加强大。Lazy Predict就是其中一个库。它是机器学习和数据科学的一个很好的工具。在本文中&#xff0c;我们将了解它是什么&#xff0c;它做什么&#…

matlab 无迹卡尔曼滤波

1、内容简介 略 26-可以交流、咨询、答疑 2、内容说明 无迹卡尔曼滤波 无迹卡尔曼滤波 无迹卡尔曼滤波 3、仿真分析 %该文件用于编写无迹卡尔曼滤波算法及其测试 %注解&#xff1a;主要子程序包括&#xff1a;轨迹发生器、系统方程 % 测量方程、UKF滤波器 %----…

LeetCode Hot100 31.下一个排列

题目&#xff1a; 整数数组的一个 排列 就是将其所有成员以序列或线性顺序排列。 例如&#xff0c;arr [1,2,3] &#xff0c;以下这些都可以视作 arr 的排列&#xff1a;[1,2,3]、[1,3,2]、[3,1,2]、[2,3,1] 。 整数数组的 下一个排列 是指其整数的下一个字典序更大的排列…

刷题笔记12.01 贪心策略

P1090 [NOIP2004 提高组] 合并果子 / [USACO06NOV] Fence Repair G - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 说最大不超过.不用高精度,好说 #include <bits/stdc.h> using namespace std; int n,n2,a; long long a1[10004],a2[10004],sum; int main() {ios::sync_…

【话题】程序员养生指南(AI生成)

目录 程序猿可能出现的职业病有哪些&#xff1f; 如何预防和对付这些职业病&#xff1f; 一、颈椎病的预防 二、神经衰弱的调适 三、肩周炎的防护 四、视力下降的保护 五、饮食与运动的重要性 六、消化系统职业病的预防 程序员养生心得&#xff1a;呵护健康&#xff0c…

百元挂耳式蓝牙耳机推荐,几款性价比高的开放式蓝牙耳机

在百元价位段&#xff0c;挂耳式蓝牙耳机是备受消费者追捧&#xff0c;提供了出色的音质、便携性和无拘束的使用体验&#xff0c;无论您是追求音乐品质&#xff0c;还是需要在办公或运动中保持通讯畅通&#xff0c;基本上都是离不开耳机的身影&#xff0c;今天小编为大家推荐几…

Burp Suite序列之目录扫描

如果你是一名渗透测试爱好者或者专业人士&#xff0c;你一定知道目录扫描是渗透测试中非常重要的一步。通过目录扫描&#xff0c;我们可以发现网站的敏感信息&#xff0c;隐藏的功能&#xff0c;甚至是后台入口。目录扫描可以帮助我们更好地了解目标网站的结构和漏洞。 但是&a…

卡码网15 .链表的基本操作III

链表的基础操作III 时间限制&#xff1a;1.000S 空间限制&#xff1a;128MB 题目描述 请编写一个程序&#xff0c;实现以下链表操作&#xff1a;构建一个单向链表&#xff0c;链表中包含一组整数数据。 1. 实现在链表的第 n 个位置插入一个元素&#xff0c;输出整个链表的…

软著项目推荐 深度学习实现语义分割算法系统 - 机器视觉

文章目录 1 前言2 概念介绍2.1 什么是图像语义分割 3 条件随机场的深度学习模型3\. 1 多尺度特征融合 4 语义分割开发过程4.1 建立4.2 下载CamVid数据集4.3 加载CamVid图像4.4 加载CamVid像素标签图像 5 PyTorch 实现语义分割5.1 数据集准备5.2 训练基准模型5.3 损失函数5.4 归…

计算机软件的分类

以功能进行分类&#xff0c;计算机软件通常可以分为系统软件和应用软件两大类。 系统软件&#xff1a;系统软件是计算机运行和管理的基本软件&#xff0c;包括操作系统、驱动程序、系统工具和服务程序等。操作系统是系统软件的核心&#xff0c;负责管理计算机的硬件资源、提供用…

python之pyqt专栏10-键盘事件

需求 通过按键盘的上下左右&#xff0c;移动button的位置。 UI界面设计 代码 # 导入sys模块 import sysfrom PyQt6.QtCore import Qt # PyQt6.QtWidgets模块中导入QApplication, QWidget from PyQt6.QtWidgets import QApplication, QWidget# untitled模块中导入Ui_Form类 f…

跨越鸿沟-颠覆性产品营销指南笔记

跨越鸿沟-颠覆性产品营销指南笔记 一、发现鸿沟 一、技术采用生命周期 技术采用生命周期 如果采用一个新产品&#xff0c;我们就得改变一贯的行为模式&#xff0c;或者改变我们依赖的其他产品或服务&#xff0c;那么&#xff0c;我们对技术采用的态度就变得很重要&#xff0c…

shell编程系列(8)-使用sed处理文本

文章目录 引言sed用法详解在文本中定位打印文本替换文本删除文本新增文本 结语 引言 在日常工作学习中我们都会遇到要编辑文本的场景&#xff0c;例如我们要用vim或者nano等命令去编辑代码&#xff0c;处理文本文件等&#xff0c;这些命令的特点都是需要我们进行交互式的实时处…

使用visual Studio MFC 平台实现对灰度图添加椒盐噪声,并进行均值滤波与中值滤波

平滑处理–滤波 本文使用visual Studio MFC 平台实现对灰度图添加椒盐噪声&#xff0c;并进行均值滤波与中值滤波 关于其他MFC单文档工程可参考 01-Visual Studio 使用MFC 单文档工程绘制单一颜色直线和绘制渐变颜色的直线 02-visual Studio MFC 绘制单一颜色三角形、渐变颜色边…

Visual Studio通过ClaudiaIDE插件设置背景图片

首先&#xff0c;在VS菜单栏上选择扩展-管理扩展&#xff0c;搜索插件为 ClaudiaIDE&#xff0c; 下载完成之后&#xff0c;关闭VS&#xff0c;点击Modify按钮安装&#xff1a; 等待安装完成&#xff0c;进入 VS , 打开 工具----选项---- ClauDiaIDE 界面 这个是背景色调 我选的…

2023-12-01 AndroidR 系统在root目录下新建文件夹和创建链接,编译的时候需要修改sepolicy权限

一、想在android 系统的根目录下新建一个tmp 文件夹&#xff0c;建立一个链接usr链接到data目录。 二、在system/core/rootdir/Android.mk里面的LOCAL_POST_INSTALL_CMD 增加 dev proc sys system data data_mirror odm oem acct config storage mnt apex debug_ramdisk tmp …