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

Vue 3 ref(new Map()) 无法触发watch

news 来源：原创 2025/8/23 23:10:25

现象

const map = ref(new Map());

通过 map.value.set(k, v); 不能触发watch

下面验证，map.value.set 并不能触发watch 的监听

代码

<script setup lang="ts">
import { ref, triggerRef, watch } from 'vue';const map = ref(new Map<string, Record<string, any>>());
watch(map, () => {console.log('map change', map.value);
});function updateMap() {map.value.set('1', { name: '1' });
}
</script>
<template><div><button @click="updateMap">updateMap</button></div>
</template>

怎么解决

使用reactive

const map = reactive(new Map())

watch deep

watch(xx,xx, {deep:true})

重新赋值

只有重新给map的ref赋值才能正常触发响应式。

map.value = new Map(map.value)

但是，如果map中数据量非常大的话，不知道这样的map的复制会不会消耗非常多的性能。

记录一下现象，防止被坑。

如果大家有不同的解决办法，欢迎提出交流。

Vue 3 ref(new Map()) 无法触发watch

现象 const map ref(new Map()); 通过 map.value.set(k, v); 不能触发watch 下面验证，map.value.set 并不能触发watch 的监听代码 <script setup lang"ts"> import { ref, triggerRef, watch } from vue;const map ref(new Map<string, R…...

编程日记 2025/8/23 23:10:25

NoteGen是一款开源跨平台的 AI 笔记应用，专注于 recording 和 writing ，基于 Tauri 开发

一、软件介绍文末提供程序和源码下载 NoteGen 是一款专注于记录和写作的跨平台 AI 笔记应用，基于 Tauri 开发。NoteGen 的核心理念是将记录、写作和 AI 结合使用，三者相辅相成。记录功能可以帮助用户快速捕捉和整理碎片化知识。整理功能是连接记录和写…...

编程日记 2025/8/16 12:07:37

repo访问gerrit.googlesource失败

编译openharmony的时候，repo阶段碰到一个问题，建议不要通过 apt install安装，里面的源来自google curl https://gitee.com/oschina/repo/raw/fork_flow/repo-py3 -o ~/repo chmod 755 ~/repo 执行类似这样的操作 repo init -u gitgitee.com:…...

编程日记 2025/8/23 23:09:40

IDEA中Git版本回退终极指南：Reset与Revert双方案详解

目录前言一、版本回退前置知识二、Reset方案：整体改写历史1、IDEA图形化操作（推荐）1.1、查看提交历史1.2、选择目标版本1.3、选择回退模式1.3.1、Soft（推荐）1.3.2、Mixed1.3.3、Hard（慎用）1.3.…...

编程日记 2025/8/16 10:03:35

【系统架构设计师】体系结构复审

目录 1. 说明2. 例题2.1 例题1 1. 说明 1.体系结构设计、文档化和复审是一个迭代过程。2.从这个方面来说，在一个主版本的软件体系结构分析之后，要安排一次由外部人员（用户代表和领域专家）参加的复审。3.鉴于体系结构文档标准化以…...

编程日记 2025/8/23 23:08:52

Unity之如何实现哔哩哔哩直播弹幕游戏

前言什么是直播间互动? 当我们使用哔哩哔哩进行直播或者观看视频时，我们可以通过接入哔哩哔哩提供的直播&互动玩法SDK，让直播和视频可以与Unity3D游戏客户端或者游戏服务器进行互动。环境要求 Unity 2020.x或更高版本依赖库：Newtonsoft Json Unity Package 在P…...

编程日记 2025/8/16 12:18:06

视觉图像处理

在MATLAB中进行视觉图像处理仿真通常涉及图像增强、滤波、分割、特征提取等操作。以下是一个分步指南和示例代码，帮助您快速入门： 1. MATLAB图像处理基础步骤 1.1 读取和显示图像 % 读取图像（替换为实际文件路径） img = imread(lena.jpg); % 显示原图 figure; subplot(2…...

编程日记 2025/8/23 18:33:56

学习LED驱动知识（二）

ppt来自B站周老师使用普通元器件或者电源芯片构建电路驱动LED 1.电阻降压限流设计案例一： USB供电电压为5V，因为LED的Vf为3v，所以电路只能6个LED并联，直接跟电源并联电流太大，LED会过流导致断路。所以要先串联一个…...

编程日记 2025/8/16 1:35:51

011---UART协议的基本知识（一）

1. 摘要文章为学习记录。主要介绍 UART 协议的概述、物理层、协议层、关键参数。 2. UART概述通用异步收发传输器（Universal Asynchronous Receiver/Transmitter），通常称作UART（串口），是一种异步****串…...

编程日记 2025/8/23 1:14:18

如何选择开源向量数据库

文章目录评估维度查询性能索引与存储扩展性数据管理能力生态支持常见向量数据库对比评估维度选择开源向量数据库时，需要综合考虑查询性能、数据规模、索引构建速度、生态支持等多个因素，以下是关键的评估维度：选择开源向量数据库时&…...

编程日记 2025/8/23 23:09:41

SpringBoot项目配置文件

SpringBoot项目提供了多种属性配置方式（properties、yaml、yml） yml配置文件使用Apifox可以方便开发接口、前端测试等工程搭建： 1.创建SpringBoot工程，并引入web开发起步依赖、mybatis、mysql驱动、lombok 2.创建数据库表&am…...

编程日记 2025/8/21 15:24:31

L33.【LeetCode笔记】循环队列(数组解法)

目录 1.题目 2.分析方法1:链表尝试使用单向循环链表模拟插入节点解决方法1:开辟(k1)个节点解决方法2:使用变量size记录队列元素个数获取队尾元素其他函数的实现说明方法2:数组重要点:指针越界的解决方法方法1:单独判断方法2:取模 3.数组代码的逐步实现…...

编程日记 2025/8/22 16:29:09

前端知识点---库和包的概念

1. 什么是库（Library）？ 库（Library） 是一组可复用的代码集合，提供特定功能（如网络请求、UI 组件、数据处理等）。特点： 只是代码的集合，没有完整的应用结构…...

编程日记 2025/8/18 15:49:24

【CSS3】筑基篇

目录复合选择器后代选择器子选择器并集选择器交集选择器伪类选择器 CSS 三大特性继承性层叠性优先级背景属性背景色背景图背景图平铺方式背景图位置背景图缩放背景图固定背景复合属性显示模式显示模式块级元素行内元素行内块元素转换显示模式结构伪类选择器结构伪类选择器…...

编程日记 2025/8/23 8:03:14

CentOS7 安装docker并配置镜像加速

一、Yum 安装docker【不推荐】 /var/lib/docker 路径主要用于存储容器数据，在使用和操作过程中数据量会逐渐增加。因此，在生产环境中，建议为 /var/lib/docker 单独挂载一个硬盘。也可以使用软连接的方式 1.1 安装必要的一些系统工具 yum i…...

编程日记 2025/8/22 5:21:24

【Go每日一练】统计字符出现的次数

👻创作者：丶重明 👻创作时间：2025年3月9日 👻擅长领域：运维目录 1.😶‍🌫️题目：2.😶‍🌫️资源：3.😶‍🌫️代…...

编程日记 2025/8/19 5:43:04

正向代理与反向代理

代理: 通常称为代理、代理服务器或 Web 代理，代理一般是指正向代理，是位于一组客户端计算机之前的服务器。当这些计算机向 Internet 上的站点和服务发出请求时，代理服务器将拦截这些请求，然后代表客户端与 Web服务器进行通信&…...

编程日记 2025/8/20 23:37:00

报表DSL优化，享元模式优化过程，优化效果怎么样？

报表DSL优化与享元模式应用详解一、报表DSL优化 1. 问题背景报表系统通常使用领域特定语言（DSL）定义模板结构、数据绑定规则及样式配置。随着复杂度提升，DSL可能面临以下问题： 冗余配置：重复定义样式、布局或数据源…...

编程日记 2025/8/20 7:25:23

双击PPT文件界面灰色不可用，需要再次打开该PPT文件才能正常打开

双击PPT文件界面灰色不可用，需要再次打开该PPT文件才能正常打开 1. 软件环境⚙️2. 问题描述🔍3. 解决方法🐡解决步骤 4. 结果预览🤔 1. 软件环境⚙️ Windows10 或 Windows11 专业版64位，安装MotionGo软件&#xff08…...

编程日记 2025/8/18 21:19:36

学习前置知识第18和19天

今天要做什么？ 1：显示数字要求格式 2：无符号除法指令:div 3：前面用vhd和img等格式进行系统界面启动，详细了解多种镜像格式文件的区别一：显示数字要求格式屏幕上显示的数字格式,三个颜色编码和数字属性 1&…...

编程日记 2025/8/23 23:08:04

C#运算符详解

一、运算符分类与功能‌ 1‌.算术运算符‌ 基本运算‌：（加）、-（减）、*（乘）、/（除）、%（取模） int a 10 / 3; // 结果为3（整数除…...

编程日记 2025/8/21 5:43:29

生成任务，大模型

一个生成项目输入：文字描述（但是给的数据集是一串数字，id，ct描述，医生描述） 输出：诊断报告一、数据处理 import pandas as pd #处理表格数据pre_train_file "data/train.csv"tr…...

编程日记 2025/8/23 23:09:40

下载Hugging Face模型的几种方式

1.网页下载直接访问Hugging Face模型页面，点击“File and versions”选项卡，选择所需的文件进行下载。 2.使用huggingface-cli 首先，安装huggingface_hub: pip install huggingface_hub 然后，使用以下命令下载模型&#xff1…...

编程日记 2025/8/19 5:42:48

【Elasticsearch入门到落地】9、hotel数据结构分析

接上篇《8、RestClient操作索引库-基础介绍及导入demo》上一篇我们介绍了RestClient的基础，并导入了使用Java语言编写的RestClient程序Demo以及将要分析的数据库。本篇我们就要分析导入的宾馆数据库tb_hotel表结构的具体含义，并分析如何建立其索引库。 …...

编程日记 2025/8/19 9:37:45

【由技及道】量子构建交响曲：Jenkinsfile流水线的十一维编程艺术【人工智障AI2077的开发日志008】

摘要：当代码提交触发时空涟漪，当构建流水线穿越量子维度——欢迎来到自动化构建的终极形态。本文将揭示如何用Jenkinsfile编写量子构建乐章，让每次代码提交都成为跨维度交响乐的音符。动机：构建系统的量子哲学 “主人啊&#xff…...

编程日记 2025/8/23 9:53:16

Unity开发——CanvasGroup组件介绍和应用

CanvasGroup是Unity中用于控制UI的透明度、交互性和渲染顺序的组件。一、常用属性的解释 1、alpha：控制UI的透明度类型：float，0.0 ~1.0， 其中 0.0 完全透明，1.0 完全不透明。通过调整alpha值可以实现UI的淡入淡…...

编程日记 2025/8/20 10:06:49

jenkins配置连接k8s集群

jenkins配置连接k8s集群前言我这边jenkins是在一个服务器里面，k8s集群在其他服务器，实现连接首先jenkins下载有k8s插件进入配置页面获取k8s-api-server地址对应k8s服务器执行 kubectl config view --minify -o jsonpath{.clusters[0].cluste…...

编程日记 2025/8/20 20:28:04

Linux 入门：常用命令速查手册

目录一.指令 1.pwd（显示所在路径） 2.ls（列出所有子目录与文件） 3.touch（创建文件） 4.mkdir（创建目录） 5.cd（改变所处位置） 6.rm（删除&…...

编程日记 2025/8/19 6:34:55

【VUE】day01-vue基本使用、调试工具、指令与过滤器

【VUE】day01-vue基本使用、调试工具、指令与过滤器 1. 什么是Vue2. Vue的基本使用 1. 什么是Vue Vue（Vue.js）是一个用于构建用户界面的渐进式 JavaScript 框架，其核心设计理念是“自底向上逐层应用”，既能作为轻量级库增强现有项…...

编程日记 2025/8/21 5:43:34

deepseek为什么要开源

一、生态位的抢占与锁定：以 JDK 版本为例在软件开发的世界里，生态位的抢占和先入为主的效应十分显著。就拿 Java 开发中的 JDK 版本来说，目前大多数开发者仍在广泛使用 JDK8。尽管 JDK17 和 JDK21 已经推出，且具备更多先进特性…...

编程日记 2025/8/18 6:55:07

软考中级软件设计师考点知识点笔记总结 day02

文章目录 3、计算机系统组成 （五大部件）3.1、主存储器3.2、运算器3.3、控制器3.4、Flynn分类法 4、指令系统4.1、七种寻址方式4.2、指令的流水处理4.3、流水线的计算上一篇文章软考知识点 day01 3、计算机系统组成 （五大部件） …...

编程日记 2025/8/23 19:37:41

Redis Cluster 客户端定位分片全解析：哈希槽与动态路由机制

Redis Cluster客户端定位分片全解析：哈希槽与动态路由机制一、引言 Redis Cluster通过分片技术将数据分散存储在多个节点，实现水平扩展。客户端如何快速定位目标分片？本文将深入解析哈希槽算法、路由逻辑及实战技巧。二、核心原理&#…...

编程日记 2025/8/21 13:52:18

基于Python+Vue的智能服装商城管理系统的设计与实现

👗 基于PythonVue的智能服装商城管理系统的设计与实现电商级解决方案：全栈技术融合智能推荐系统多维度数据分析项目亮点：课程设计优选 | 企业级架构规范 | 完整电商功能闭环 | 毕业设计选择 🌐 在线资源速览类别地址访问方…...

编程日记 2025/8/21 6:04:09

提升Web可访问性的10个关键实践

在当今互联网时代，确保网站的可访问性（Accessibility）已经成为开发者和设计师的重要任务之一。Web可访问性不仅有助于残障用户更好地访问和使用网站，还能提升整体用户体验。本文将介绍10个关键的Web可访问性实践，帮助你…...

编程日记 2025/8/20 4:43:08

基于DeepSeek的智慧医药系统（源码+部署教程）

运行环境智慧医药系统运行环境如下： 前端： HTMLCSS后端：Java AIGCDeepseekIDE工具：IDEA技术栈：Springboot HTMLCSS MySQL 主要角色智慧医药系统主要分为两个角色。游客尚未进行注册和登录。具备登录注册、…...

编程日记 2025/8/23 20:52:37

yolov5训练自己数据集的全流程+踩过的坑

一，拿到yolov5数据集的第一步是什么呢，安装必要的依赖文件。在requirements.txt文件下存放 pip install -r requirements.txt二，检查是否可以正常进行检测，在detect.py，文件下，里面有默认的设置文件是可以…...

编程日记 2025/8/21 19:21:10

【Recon】Git源代码泄露题目解题方法

CTF中Git源代码泄露题目解题方法 1. 确认存在.git目录泄露2. 下载完整的.git目录3. 恢复Git仓库历史4. 查找Flag的常见位置5. 处理不完整的.git目录6. 其他技巧示例流程在CTF中遇到Git源代码泄露题目时，通常可以通过以下步骤解决： 1. 确认存在.git目录泄…...

编程日记 2025/8/22 5:21:11

Android APP 启动流程详解（含冷启动、热启动）

目录一、流程对比图二、冷启动（Cold Launch） 2.1 用户点击应用图标（Launcher 触发） 2.2 AMS 处理启动请求 2.3 请求 Zygote 创建新进程 2.4 初始化应用进程 2.5 创建 Application 对象 2.6 启动目标 Activity 2.7 执行 …...

编程日记 2025/8/19 3:05:56

Python实现网络通信：Socket模块与TCP/IP协议全解析

Langchain系列文章目录 01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南 02-玩转 LangChain Memory 模块：四种记忆类型详解及应用场景全覆盖 03-全面掌握 LangChain：从核心链条构建到动态任务分配的实战指南 04-玩转 LangChai…...

编程日记 2025/8/23 7:40:24

信奥赛CSP-J复赛集训（模拟算法专题）（1）：P8813 [CSP-J 2022] 乘方

信奥赛CSP-J复赛集训（模拟算法专题）（1）：P8813 [CSP-J 2022] 乘方题目描述小文同学刚刚接触了信息学竞赛，有一天她遇到了这样一个题：给定正整数 a a a 和 b b b，求 a b a^b ab …...

编程日记 2025/8/23 4:06:57

MongoDB学习笔记

MongoDB https://www.mongodb.com/download-center/community 打开客户端 mongo.exe 注意6.0版本不一样需要自行安装Mongoshell MongoDB Shell Download | MongoDB 创建数据库 use go_db; 创建集合 db.createCollection("student"); 添加MongoDB依赖 go get …...

编程日记 2025/8/20 7:32:14

C#模拟鼠标点击，模拟鼠标双击，模拟鼠标恒定速度移动，可以看到轨迹

C#模拟鼠标点击，模拟鼠标双击，模拟鼠标恒定速度移动，可以看到轨迹 using System; using System.Collections.Generic; using System.Linq; using System.Runtime.InteropServices; using System.Text; using System.Threading.Tasks;namespa…...

编程日记 2025/8/21 17:49:19

时间复杂度空间复杂度

一、时间复杂度时间复杂度（Time Complexity）表示算法运行时间随输入规模增长的变化趋势。通常用大 O 表示法（Big O Notation）来描述。常见时间复杂度复杂度名称例子O(1)常数时间复杂度访问数组中的某个元素。O(log n)对数时间复…...

编程日记 2025/8/19 3:05:52

【科研绘图系列】R语言绘制组合箱线图（grouped boxplot）

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录介绍加载R包数据下载导入数据画图输出图片系统信息介绍【科研绘图系列】R语言绘制组合箱线图（grouped boxplot）加载R包 library(tidyverse) library(lemon) library(ggnewscale)…...

编程日记 2025/8/21 18:11:45

【前缀和与差分 C/C++】洛谷 P8218 求区间和

2025 - 03 - 09 - 第 72 篇 Author: 郑龙浩 / 仟濹【前缀和与差分 C/C】文章目录洛谷 P8218 求区间和题目描述输入格式输出格式输入输出样例 #1输入 #1输出 #1 说明/提示思路代码洛谷 P8218 求区间和题目描述给定 n n n 个正整数组成的数列 a 1 , a 2 , ⋯ , a n a_…...

编程日记 2025/8/16 12:01:29

数据库二三事（14）

备份与恢复数据库备份具体内容包括数据库结构，对象与数据，造成数据丢失的原因有： 存储介质故障（硬件损耗） 用户操作错误（人工） 服务器故障（软硬都可能） 病毒侵害 …...

编程日记 2025/8/22 23:50:11

C++之list

list是链表的意思，由一个个节点组成一、基本接口使用： （1）与vector相同，有个尾插，也可以使用迭代器遍历： void test_list1() {list<int> lt;lt.push_back(1);lt.push_back(2);lt.push…...

编程日记 2025/8/23 4:11:11

数据增强术：如何利用大模型（LLMs）来模拟不同的扰动类型以增强信息提取任务的鲁棒性

一、对抗样本库构建 1. 基于LLMs的领域针对性扰动设计对抗样本生成替换实体、三元组和触发器（Replace Entity, Triple, and Trigger）使用LLMs（如GPT-4）来替换句子中的实体、关系三元组或事件触发器，同时保持其类型不变，并确保其他内容不受影响： xxx名称（如“x方” →…...

编程日记 2025/8/21 8:03:17

《Gradio : AI awesome-demos》

《Gradio : AI awesome-demos》 This is a list of some wonderful demos & applications built with Gradio. Heres how to contribute yours! 🖊️ Natural language processing Demo name (link to demo)input type(s)output type(s)status badgeruDALL-ET…...

编程日记 2025/8/22 11:27:21

物联网中如何增加其可扩展性协议网络设备还包括软件层面上的

物联网（IoT）系统的可扩展性是指系统能够随着设备数量、数据流量和业务需求的增长而灵活扩展的能力。为了增加物联网的可扩展性，需要从协议、网络、设备和软件等多个层面进行优化和设计。以下是一些具体的策略和方法： 1. 协议层面的可扩展性 1.1 采用轻量级协议轻量级协议…...

编程日记 2025/8/22 20:39:21

现象

代码

怎么解决

使用reactive

watch deep

重新赋值

相关文章：