当前位置: 首页 > news >正文

vite-vue3使用web-worker应用指南和报错解决

主线程:初始化worker和监听子线程的消息


let worker: any;
const salesConfigData = ref<any[]>([]);
// 显示非上架
const showNotList = ref(false);// /src/views/ceshi/salesConfig/worker.js
worker = new Worker(new URL("/src/views/ceshi/salesConfig/components/worker.js", import.meta.url), {type: "module",
});
worker.onmessage = (e) => {console.log(777777887, e);salesConfigData.value = e.data;
};

主线程:主动触发消息

watch([() => props.salesConfigFeatrues, () => props.saleProductsOptions, showNotList],([features, products, showNotListVal]) => {const filteredProducts = products.filter((p) => props.salesModel.includes(p.value));const rawData = features.map((feature) => {const rawFeature = toRaw(feature);return {...rawFeature,salesProducts: toRaw(rawFeature.salesProducts).slice(),};});console.log(777777880, features, products, rawData);worker.postMessage({features: rawData,products: filteredProducts,showNotList: showNotListVal,});},{ immediate: true }
);

子线程:worker线程接受参数,处理数据,发消息

import { formatsalesConfigFeatrues } from "@/views/ceshi/salesConfig/utils";self.onmessage = function (e) {console.log(777777881, e);const { features, products, showNotList } = e.data;const result = formatsalesConfigFeatrues(features, products, showNotList);self.postMessage(result);
};
// self.addEventListener(
//   "message",
//   function (e) {
//     console.log(777777882, e);
//     self.postMessage("You said: " + e.data);
//   },
//   false
// );

经典错误1: [plugin:vite:worker-import-meta-url] Expression expected

解决办法:确保路径参数正确

worker = new Worker(new URL("/src/views/ceshi/salesConfig/components/worker.js", import.meta.url), {type: "module",
});

经典错误2: DataCloneError: Failed to execute 'postMessage' on 'Worker': [object Array] could not be cloned. at watch.immediate

解决办法:传输的数据中存在proxy数组或者function等无法被拷贝的类型,这里处理数组:

const rawData = features.map((feature) => {const rawFeature = toRaw(feature);return {...rawFeature,salesProducts: toRaw(rawFeature.salesProducts).slice(),};});

相关文章:

vite-vue3使用web-worker应用指南和报错解决

主线程&#xff1a;初始化worker和监听子线程的消息 let worker: any; const salesConfigData ref<any[]>([]); // 显示非上架 const showNotList ref(false);// /src/views/ceshi/salesConfig/worker.js worker new Worker(new URL("/src/views/ceshi/salesConf…...

校园快递助手小程序毕业系统设计

系统功能介绍 管理员端 1&#xff09;登录&#xff1a;输入账号密码进行登录 2&#xff09;用户管理&#xff1a;查看编辑添加删除 学生信息 3&#xff09;寄件包裹管理&#xff1a;查看所有的包裹信息&#xff0c;及物流信息 4&#xff09;待取件信息&#xff1a;查看已到达的…...

python量化交易——金融数据管理最佳实践——使用qteasy管理本地数据源

文章目录 统一定义的金融历史数据表最重要的数据表数据表的定义交易日历表的定义&#xff1a;交易日历表: trade_calendar qteasy是一个功能全面且易用的量化交易策略框架&#xff0c; Github地址在这里。使用它&#xff0c;能轻松地获取历史数据&#xff0c;创建交易策略并完…...

BIO、NIO、AIO、Netty从简单理解到使用

Java编程中BIO、NIO、AIO是三种不同的I/O&#xff08;输入/输出&#xff09;模型&#xff0c;它们代表了不同的I/O处理方式。 Netty就是基于Java的NIO&#xff08;New Input/Output&#xff09;类库编写的一个高性能、异步事件驱动的网络应用程序框架&#xff0c;用于快速开发可…...

计算机毕业设计SpringBoot+Vue.js工厂车间管理系统源码+文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

一、图形图像的基本概念

文章目录 一、分辨率概念二、图形图像的区别三、位图和矢量图的区别 一、分辨率概念 图形显示计数中的分辨率概念有三种&#xff0c;即屏幕分辨率、显示分辨率和显卡分辨率。它们既有区别又有着密切的联系&#xff0c;对图形显示的处理有极大的影响。 1.屏幕分辨率 显示器分辨…...

前端跨域问题初探:理解跨域及其解决方案概览

在当今的Web开发中&#xff0c;跨域问题是一个常见且棘手的挑战 随着前端技术的不断进步&#xff0c;越来越多的应用需要从不同的域名、协议或端口获取资源 然而&#xff0c;浏览器的同源策略&#xff08;Same-Origin Policy&#xff09;限制了这种跨域请求&#xff0c;以确保…...

SQL分组问题

下列为电商公司用户访问时间数据 统计某个用户连续的访问记录&#xff0c;如果时间间隔小于60s&#xff0c;就分为一组 id ts 1001 17523641234 1001 17523641256 1002 17523641278 1001 17523641334 1002 17523641434 1001 17523641534 1001 17523641544 1002 17523…...

Oracle 数据库基础入门(二):深入理解表的约束

在 Oracle 数据库的学习进程中&#xff0c;表的约束是构建健壮、准确且高效数据库的关键要素。约束如同数据库的 “规则守护者”&#xff0c;它通过对数据的限制&#xff0c;确保了数据的完整性和一致性&#xff0c;就如同交通规则保障道路上车辆行驶的有序性一样。对于 Java 全…...

DeepSeek掘金——DeepSeek-R1驱动的房地产AI代理

DeepSeek掘金——DeepSeek-R1驱动的房地产AI代理 本文探讨如何使用 Smolagents 和 DeepSeek-R1 构建房地产代理,并利用工具进行网页抓取和数据导出。 AI 代理对于自动化复杂的推理任务至关重要。Smolagents 是由 Hugging Face 开发的轻量级 AI 代理框架,允许将大型语言模型 …...

WebP2P技术在嵌入式设备中的应用:EasyRTC音视频通话SDK如何实现高效通信?

在数字化时代&#xff0c;实时通信技术&#xff08;RTC&#xff09;与人工智能&#xff08;AI&#xff09;的融合正在重塑各个行业的交互方式。从在线教育到远程医疗&#xff0c;从社交娱乐到企业协作&#xff0c;RTC的应用场景不断拓展。然而&#xff0c;传统的RTC解决方案往往…...

【零基础到精通Java合集】第三集:流程控制与数组

针对**“流程控制与数组”**的15分钟课程内容设计,聚焦代码逻辑设计与数据结构基础: 课程标题:流程控制与数组(15分钟) 目标:掌握分支/循环语法与数组操作,能编写条件判断与数据遍历程序 一、课程内容与时间分配 0-2分钟 课程目标与逻辑导图 明确学习目标:分支结构、…...

VsCode + EIDE + OpenOCD + STM32(野火DAP) 开发环境配置

VsCode EIDE OpenOCD STM32(野火DAP) 开发环境配置 接受了新时代编辑器的我&#xff0c;实在受不了Keil的上古编辑页面&#xff0c;周树人说过&#xff1a;由奢入俭难&#xff0c;下面我们一起折腾一下开源软件Vscode&#xff0c; 用以开发51和STM32&#xff0c;有错误之处&…...

【vue-echarts】——01.认识echarts

文章目录 前言一、echarts二、使用步骤1.vue cli创建项目并安装第三方模块echarts2.显示图表总结前言 定制的数据可视化图表。ECharts最初由百度团队开源,并于2018年初捐赠给Apache基金会,成为ASF孵化级项目。2021年1月26日晚,Apache基金会官方宣布ECharts项目正式毕业。 一…...

【http://noi.openjudge.cn/】4.3算法之图论——1538:Gopher II

[【http://noi.openjudge.cn/】4.3算法之图论——1538:Gopher II] 题目 查看提交统计提问 总时间限制: 2000ms 内存限制: 65536kB 描述 The gopher family, having averted the canine threat, must face a new predator. The are n gophers and m gopher holes, each at di…...

Linux常见操作命令

Linux系统拥有丰富的命令行工具&#xff0c;通过这些命令可以高效地完成各种系统管理和日常操作任务。以下是一些常见的Linux操作命令&#xff1a; 文件和目录操作&#xff1a; - 创建目录&#xff1a;使用 mkdir 命令&#xff0c;例如 mkdir test 可以创建名为 test 的目录。如…...

Linux下测试Wifi性能——2.Linux下wifi指令

一、前言 相关知识大家看前一章节 Linux下测试Wifi性能——1.Wifi相关知识-CSDN博客 二、指令 1.查找可用网卡 iw dev 其中 接口名称&#xff08;Interface&#xff09; p2p0 和 wlan0 都是无线接口&#xff08;网卡&#xff09;的名称。 wlan0 是常见的无线局域网接口名…...

(十 九)趣学设计模式 之 中介者模式!

目录 一、 啥是中介者模式&#xff1f;二、 为什么要用中介者模式&#xff1f;三、 中介者模式的实现方式四、 中介者模式的优缺点五、 中介者模式的应用场景六、 总结 &#x1f31f;我的其他文章也讲解的比较有趣&#x1f601;&#xff0c;如果喜欢博主的讲解方式&#xff0c;…...

Leetcode 54: 螺旋矩阵

Leetcode 54: 螺旋矩阵 是一道经典的矩阵遍历模拟题目&#xff0c;要求我们以螺旋顺序遍历一个二维数组。这个问题在面试中非常经典&#xff0c;考察模拟、数组操作以及逻辑清晰度。掌握本题的高效解法可以迅速给面试官留下好印象。 适合面试的解法&#xff1a;边界法&#xff…...

abseil-cpp:环境搭建

参考: https://abseil.io/docs/cpp/quickstart-cmake abseil-cpp.git/dd4c89b abseil-cpp.git/20240722.1 1. clone代码仓库、编译 git clone https://github.com/abseil/abseil-cpp.git /app/abseil-cpp/ #/app/abseil-cpp/.git/config git checkout 20240722.1git rev-pa…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...

C++11 constexpr和字面类型:从入门到精通

文章目录 引言一、constexpr的基本概念与使用1.1 constexpr的定义与作用1.2 constexpr变量1.3 constexpr函数1.4 constexpr在类构造函数中的应用1.5 constexpr的优势 二、字面类型的基本概念与使用2.1 字面类型的定义与作用2.2 字面类型的应用场景2.2.1 常量定义2.2.2 模板参数…...