当前位置: 首页 > 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…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...

【Linux手册】探秘系统世界:从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

Vue3 PC端 UI组件库我更推荐Naive UI

一、Vue3生态现状与UI库选择的重要性 随着Vue3的稳定发布和Composition API的广泛采用&#xff0c;前端开发者面临着UI组件库的重新选择。一个好的UI库不仅能提升开发效率&#xff0c;还能确保项目的长期可维护性。本文将对比三大主流Vue3 UI库&#xff08;Naive UI、Element …...

【Zephyr 系列 16】构建 BLE + LoRa 协同通信系统:网关转发与混合调度实战

🧠关键词:Zephyr、BLE、LoRa、混合通信、事件驱动、网关中继、低功耗调度 📌面向读者:希望将 BLE 和 LoRa 结合应用于资产追踪、环境监测、远程数据采集等场景的开发者 📊篇幅预计:5300+ 字 🧭 背景与需求 在许多 IoT 项目中,单一通信方式往往难以兼顾近场数据采集…...