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

【Vue篇】数据秘语：从watch源码看响应式宇宙的蝴蝶效应

news 来源：原创 2025/7/29 15:27:44

引言

💬 欢迎讨论：关于Vue侦听器应用、防抖优化与响应式设计，欢迎评论区交流技术细节！
👍 点赞支持：若本文助你攻克watch难题，欢迎三连助力，共享前端技术精粹！
🚀 进阶指南：watch与计算属性联奏，演绎Vue响应式交响曲，构建数据与视图的动态协奏。

一、watch侦听器（监视器）

1.作用：

监视数据变化，执行一些业务逻辑或异步操作

2.语法：

watch同样声明在跟data同级的配置项中
简单写法：简单类型数据直接监视
完整写法：添加额外配置项

3. 配置项

完整写法 —>添加额外的配置项

deep:true 对复杂类型进行深度监听
immdiate:true 初始化立刻执行一次

data: {obj: {words: '苹果',lang: 'italy'},
},watch: {// watch 完整写法对象: {deep: true, // 深度监视immdiate:true,//立即执行handler函数handler (newValue) {console.log(newValue)}}
}

4.总结

watch侦听器的写法有几种？

1.简单写法

2.完整写法

二、翻译案例-代码实现

1.需求

当文本框输入的时候右侧翻译内容要时时变化（实时翻译）
当下拉框中的语言发生变化的时候右侧翻译的内容依然要时时变化
如果文本框中有默认值的话要立即翻译

2.代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-size: 18px;}#app {padding: 10px 20px;}.query {margin: 10px 0;}.box {display: flex;}textarea {width: 300px;height: 160px;font-size: 18px;border: 1px solid #dedede;outline: none;resize: none;padding: 10px;}textarea:hover {border: 1px solid #1589f5;}.transbox {width: 300px;height: 160px;background-color: #f0f0f0;padding: 10px;border: none;}.tip-box {width: 300px;height: 25px;line-height: 25px;display: flex;}.tip-box span {flex: 1;text-align: center;}.query span {font-size: 18px;}.input-wrap {position: relative;}.input-wrap span {position: absolute;right: 15px;bottom: 15px;font-size: 12px;}.input-wrap i {font-size: 20px;font-style: normal;}</style></head><body><div id="app"><!-- 条件选择框 --><div class="query"><span>翻译成的语言：</span><select v-model="obj.lang"><option value="italy">意大利</option><option value="english">英语</option><option value="german">德语</option></select></div><!-- 翻译框 --><div class="box"><div class="input-wrap"><textarea v-model="obj.words"></textarea><span><i>⌨️</i>文档翻译</span></div><div class="output-wrap"><div class="transbox">{{ result }}</div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 需求：输入内容，修改语言，都实时翻译// 接口地址：https://applet-base-api-t.itheima.net/api/translate// 请求方式：get// 请求参数：// （1）words：需要被翻译的文本（必传）// （2）lang： 需要被翻译成的语言（可选）默认值-意大利// -----------------------------------------------const app = new Vue({el: '#app',data: {obj: {words: '小黑',lang: 'italy'},result: '', // 翻译结果},watch: {obj: {deep: true, // 深度监视immediate: true, // 立刻执行，一进入页面handler就立刻执行一次handler (newValue) {clearTimeout(this.timer)this.timer = setTimeout(async () => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: newValue})this.result = res.data.dataconsole.log(res.data.data)}, 300)}}// 'obj.words' (newValue) {//   clearTimeout(this.timer)//   this.timer = setTimeout(async () => {//     const res = await axios({//       url: 'https://applet-base-api-t.itheima.net/api/translate',//       params: {//         words: newValue//       }//     })//     this.result = res.data.data//     console.log(res.data.data)//   }, 300)// }}})</script></body>
</html>

三、综合案例——购物车案例

1. 需求

需求说明：

渲染功能
删除功能
修改个数
全选反选
统计选中的总价和总数量
持久化到本地

实现思路：

1.基本渲染： v-for遍历、:class动态绑定样式

2.删除功能： v-on 绑定事件，获取当前行的id

3.修改个数： v-on绑定事件，获取当前行的id，进行筛选出对应的项然后增加或减少

4.全选反选

必须所有的小选框都选中，全选按钮才选中 → every
如果全选按钮选中，则所有小选框都选中
如果全选取消，则所有小选框都取消选中

声明计算属性，判断数组中的每一个checked属性的值，看是否需要全部选

5.统计选中的总价和总数量：通过计算属性来计算选中的总价和总数量

6.持久化到本地：在数据变化时都要更新下本地存储 watch

2. 代码

css

.app-container {padding-bottom: 300px;width: 800px;margin: 0 auto;
}
@media screen and (max-width: 800px) {.app-container {width: 600px;}
}
.app-container .banner-box {border-radius: 20px;overflow: hidden;margin-bottom: 10px;
}
.app-container .banner-box img {width: 100%;
}
.app-container .nav-box {background: #ddedec;height: 60px;border-radius: 10px;padding-left: 20px;display: flex;align-items: center;
}
.app-container .nav-box .my-nav {display: inline-block;background: #5fca71;border-radius: 5px;width: 90px;height: 35px;color: white;text-align: center;line-height: 35px;margin-right: 10px;
}.breadcrumb {font-size: 16px;color: gray;
}
.table {width: 100%;text-align: left;border-radius: 2px 2px 0 0;border-collapse: separate;border-spacing: 0;
}
.th {color: rgba(0, 0, 0, 0.85);font-weight: 500;text-align: left;background: #fafafa;border-bottom: 1px solid #f0f0f0;transition: background 0.3s ease;
}
.th.num-th {flex: 1.5;
}
.th {text-align: center;
}
.th:nth-child(4),
.th:nth-child(5),
.th:nth-child(6),
.th:nth-child(7) {text-align: center;
}
.th.th-pic {flex: 1.3;
}
.th:nth-child(6) {flex: 1.3;
}.th,
.td {position: relative;padding: 16px 16px;overflow-wrap: break-word;flex: 1;
}
.pick-td {font-size: 14px;
}
.main,
.empty {border: 1px solid #f0f0f0;margin-top: 10px;
}
.tr {display: flex;cursor: pointer;border-bottom: 1px solid #ebeef5;
}
.tr.active {background-color: #f5f7fa;
}
.td {display: flex;justify-content: center;align-items: center;
}.table img {width: 100px;height: 100px;
}button {outline: 0;box-shadow: none;color: #fff;background: #d9363e;border-color: #d9363e;color: #fff;background: #d9363e;border-color: #d9363e;line-height: 1.5715;position: relative;display: inline-block;font-weight: 400;white-space: nowrap;text-align: center;background-image: none;border: 1px solid transparent;box-shadow: 0 2px 0 rgb(0 0 0 / 2%);cursor: pointer;transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;touch-action: manipulation;height: 32px;padding: 4px 15px;font-size: 14px;border-radius: 2px;
}
button.pay {background-color: #3f85ed;margin-left: 20px;
}.bottom {height: 60px;display: flex;align-items: center;justify-content: space-between;padding-right: 20px;border: 1px solid #f0f0f0;border-top: none;padding-left: 20px;
}
.right-box {display: flex;align-items: center;
}
.check-all {cursor: pointer;
}
.price {color: hotpink;font-size: 30px;font-weight: 700;
}
.price-box {display: flex;align-items: center;
}
.empty {padding: 20px;text-align: center;font-size: 30px;color: #909399;
}
.my-input-number {display: flex;
}
.my-input-number button {height: 40px;color: #333;border: 1px solid #dcdfe6;background-color: #f5f7fa;
}
.my-input-number button:disabled {cursor: not-allowed!important;
}
.my-input-number .my-input__inner {height: 40px;width: 50px;padding: 0;border: none;border-top: 1px solid #dcdfe6;border-bottom: 1px solid #dcdfe6;
}

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="./css/inputnumber.css" /><link rel="stylesheet" href="./css/index.css" /><title>购物车</title></head><body><div class="app-container" id="app"><!-- 顶部banner --><div class="banner-box"><img src="http://autumnfish.cn/static/fruit.jpg" alt="" /></div><!-- 面包屑 --><div class="breadcrumb"><span>🏠</span>/<span>购物车</span></div><!-- 购物车主体 --><div class="main" v-if="fruitList.length > 0"><div class="table"><!-- 头部 --><div class="thead"><div class="tr"><div class="th">选中</div><div class="th th-pic">图片</div><div class="th">单价</div><div class="th num-th">个数</div><div class="th">小计</div><div class="th">操作</div></div></div><!-- 身体 --><div class="tbody"><div v-for="(item, index) in fruitList" :key="item.id" class="tr" :class="{ active: item.isChecked }"><div class="td"><input type="checkbox" v-model="item.isChecked" /></div><div class="td"><img :src="item.icon" alt="" /></div><div class="td">{{ item.price }}</div><div class="td"><div class="my-input-number"><button :disabled="item.num <= 1" class="decrease" @click="sub(item.id)"> - </button><span class="my-input__inner">{{ item.num }}</span><button class="increase" @click="add(item.id)"> + </button></div></div><div class="td">{{ item.num * item.price }}</div><div class="td"><button @click="del(item.id)">删除</button></div></div></div></div><!-- 底部 --><div class="bottom"><!-- 全选 --><label class="check-all"><input type="checkbox" v-model="isAll"/>全选</label><div class="right-box"><!-- 所有商品总价 --><span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalPrice }}</span></span><!-- 结算按钮 --><button class="pay">结算( {{ totalCount }} )</button></div></div></div><!-- 空车 --><div class="empty" v-else>🛒空空如也</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const defaultArr = [{id: 1,icon: 'http://autumnfish.cn/static/火龙果.png',isChecked: true,num: 2,price: 6,},{id: 2,icon: 'http://autumnfish.cn/static/荔枝.png',isChecked: false,num: 7,price: 20,},{id: 3,icon: 'http://autumnfish.cn/static/榴莲.png',isChecked: false,num: 3,price: 40,},{id: 4,icon: 'http://autumnfish.cn/static/鸭梨.png',isChecked: true,num: 10,price: 3,},{id: 5,icon: 'http://autumnfish.cn/static/樱桃.png',isChecked: false,num: 20,price: 34,},]const app = new Vue({el: '#app',data: {// 水果列表fruitList: JSON.parse(localStorage.getItem('list')) || defaultArr,},computed: {// 默认计算属性：只能获取不能设置，要设置需要写完整写法// isAll () {//   // 必须所有的小选框都选中，全选按钮才选中 → every//   return this.fruitList.every(item => item.isChecked)// }// 完整写法 = get + setisAll: {get () {return this.fruitList.every(item => item.isChecked)},set (value) {// 基于拿到的布尔值，要让所有的小选框 同步状态this.fruitList.forEach(item => item.isChecked = value)}},// 统计选中的总数 reducetotalCount () {return this.fruitList.reduce((sum, item) => {if (item.isChecked) {// 选中 → 需要累加return sum + item.num} else {// 没选中 → 不需要累加return sum}}, 0)},// 总计选中的总价 num * pricetotalPrice () {return this.fruitList.reduce((sum, item) => {if (item.isChecked) {return sum + item.num * item.price} else {return sum}}, 0)}},methods: {del (id) {this.fruitList = this.fruitList.filter(item => item.id !== id)},add (id) {// 1. 根据 id 找到数组中的对应项 → findconst fruit = this.fruitList.find(item => item.id === id)// 2. 操作 num 数量fruit.num++},sub (id) {// 1. 根据 id 找到数组中的对应项 → findconst fruit = this.fruitList.find(item => item.id === id)// 2. 操作 num 数量fruit.num--}},watch: {fruitList: {deep: true,handler (newValue) {// 需要将变化后的 newValue 存入本地 （转JSON）localStorage.setItem('list', JSON.stringify(newValue))}}}})</script></body>
</html>

以上就是关于【Vue篇】数据秘语：从watch源码看响应式宇宙的蝴蝶效应内容啦。本文剖析了watch的监听机制、深度追踪技巧，并通过翻译防抖与购物车案例实战，解构了数据与视图的动态绑定逻辑。若对watch配置、计算属性联用或本地持久化方案存在疑问，欢迎评论区留下技术火花！💡

【Vue篇】数据秘语：从watch源码看响应式宇宙的蝴蝶效应

目录引言一、watch侦听器（监视器） 1.作用： 2.语法： 3.侦听器代码准备 4. 配置项 5.总结二、翻译案例-代码实现 1.需求 2.代码实现三、综合案例——购物车案例 1. 需求 2. 代码引言 💬 欢迎讨论&#…...

编程日记 2025/7/29 15:27:44

esp32课设记录（二）lcd屏显示文字与照片

取模软件链接： 链接: 百度网盘请输入提取码提取码: 1234 课设要求如图所示，因此需要在esp32显示文字和照片。在上个文章中我已经写了按键相关内容。这篇主要描述怎么显示文字和照片。我使用的是ESP-IDF库。本项目使用的是基于ST7789驱动芯片的LCD屏幕…...

编程日记 2025/7/24 12:55:58

Open CASCADE学习|几何体切片处理：OpenMP与OSD_Parallel并行方案深度解析

在三维建模与仿真领域，几何体切片处理是CAE前处理、3D打印路径规划、医学影像分析等场景的关键技术。其核心目标是将三维模型沿特定方向离散为二维截面集合，便于后续分析或制造。OpenCASCADE作为开源几何内核，提供高效的布尔运算与几何算法&a…...

编程日记 2025/7/26 1:36:48

【Android】从Choreographer到UI渲染（二）

【Android】从Choreographer到UI渲染（二） Google 在 2012 年推出的 Project Butter（黄油计划）是 Android 系统发展史上的重要里程碑，旨在解决长期存在的 UI 卡顿、响应延迟等问题，提升用户体验。在 Androi…...

编程日记 2025/7/17 1:14:43

编程日记 2025/7/27 17:17:52

济南国网数字化培训班学习笔记-第三组-2-电力通信光缆网认知

电力通信光缆网认知光缆网架构现状基础底座电路系统是高度复杂，实时性、安全性、可靠性要求极高的巨系统，必须建设专用通信网相伴相生电力系统是由发电、输电、变电、配电、用电等一次设施，及保障其正常运行的保护、自动化、通信等…...

编程日记 2025/7/9 11:28:29

黑灰产业链深度解析

黑灰产业链深度解析大家好，欢迎来到「黑产档案」。本频道专注于反诈教育宣传，通过深度拆解黑灰产业链的运作逻辑，帮助公众识别骗局、规避风险。本节课将聚焦产业链的核心环节，揭示其背后的灰色生态。一、黑灰产的定义与范畴要…...

编程日记 2025/7/17 10:53:15

golang选项设计模式

选项设计模式有时候一个函数会有很多参数，为了方便函数的使用，我们会给希望给一些参数设定默认值，调用时只需要传与默认值不同的参数即可，类似于 python 里面的默认参数和字典参数，虽然 golang 里面既没有默认参数也…...

编程日记 2025/7/25 16:44:49

方案精读：104页DeepSeek金融银行核算流程场景部署建设方案【附全文阅读】

DeepSeek，金融银行核算流程的革新方案！这份方案专为金融银行从业者打造，旨在解决传统核算流程的难题。当下，金融银行核算面临效率低、错误率高、合规压力大等挑战，DeepSeek 方案正是应对之策。该方案运用人工智能和大数据技术，实现数据采集、清洗自动化，智能核算对账，…...

编程日记 2025/7/29 15:21:37

【MySQL】02.数据库基础

1. 数据库的引入之前存储数据用文件就可以了，为什么还要弄个数据库? 文件存储存在安全性问题，文件不利于数据查询和管理，文件不利于存储海量数据，文件在程序中控制不方便。而为了解决上述问题，专家们设计出更加利于…...

编程日记 2025/7/22 11:30:43

STM32项目实战：ADC采集

STM32F103C8T6的ADC配置。PB0对应的是ADC1的通道8。在标准库中，需要初始化ADC，设置通道，时钟，转换模式等。需要配置GPIOB的第0脚为模拟输入模式，然后配置ADC1的通道8，设置转换周期和触发方式。接下来是I2C…...

编程日记 2025/7/21 1:09:59

《AI语音模型：MiniMax Speech-02》

开场：AI 语音界的震撼弹在 AI 语音技术的激烈竞争赛道上，MiniMax Speech - 02 的出现宛如一颗震撼弹，瞬间引爆了整个行业。不久前，一则消息在全球 AI 领域引起轩然大波：MiniMax 的新一代语音大模型 Speech - 02&#…...

编程日记 2025/7/27 18:25:10

基于LabVIEW的双音多频系统设计

目录 1 系统设计概述双音多频（Dual-Tone Multi-Frequency, DTMF）信号是一种广泛应用于电话系统中的音频信号，通过不同的频率组合表示不同的按键。每个按键对应两个频率，一个低频和一个高频，共同组成独特的信号。在虚拟仪器技术快速发展的背景下，利用LabVIEW等图形化编程…...

编程日记 2025/7/10 16:46:42

快速生成角色背景设定：基于Next.js的AI辅助工具开发实践

引言在游戏开发、小说创作和角色扮演（RP）中，角色背景设定（Headcanon）的构建往往耗时耗力。传统方法依赖手动编写，容易陷入思维定式。本文将分享如何利用Next.js和Tailwind CSS开发一个高效的AI角色设定生…...

编程日记 2025/7/29 15:24:05

轻量级视频剪辑方案：FFmpeg图形化工具体验

FFmpeg小白助手是基于开源FFmpeg开发的本地化视频处理软件，采用绿色免安装设计，解压后即可直接运行。该工具主要面向普通用户的日常音视频处理需求，通过简洁的图形界面降低了FFmpeg的使用门槛。功能特性基础编辑功能格式转换：…...

编程日记 2025/7/25 22:26:13

主成分分析的应用之sklearn.decomposition模块的PCA函数

主成分分析的应用之sklearn.decomposition模块的PCA函数一、模型建立整体步骤二、数据 2297.86 589.62 474.74 164.19 290.91 626.21 295.20 199.03 2262.19 571.69 461.25 185.90 337.83 604.78 354.66 198.96 2303.29 589.99 516.21 236.55 403.92 730.05 438.41 225.80 …...

编程日记 2025/7/28 14:16:26

Java基于数组的阻塞队列实现详解

在多线程编程中，阻塞队列是一种非常有用的工具，它可以在生产者和消费者之间提供一个缓冲区，使得生产者可以往队列中添加数据，而消费者可以从队列中取出数据。当队列满时，生产者会被阻塞直到有空间可用；当队…...

编程日记 2025/7/28 18:04:06

ngx_http_random_index_module 模块概述

一、使用场景随机内容分发当同一目录下存放多份等价内容（如多张轮播图、不同版本静态页面等）时，可通过随机索引实现负载均衡或流量分散。A/B 测试通过目录请求自动随机分配用户到不同测试组，无需后端逻辑参与。动态“首页”选…...

编程日记 2025/7/29 1:38:24

你引入的lodash充分利用了吗？

#开发中，发现自己只有cloneDeep的时候才想起来用这个库的便利，搜索了项目内代码，发现大家基本也是这样，其实我们错过了很多好东西# cloneDeep 深拷贝 var objects [{ a: 1 }, { b: 2 }];var deep _.cloneDeep(objects); conso…...

编程日记 2025/7/22 10:37:28

Python爬虫基础

本篇内容中，我们主要分享一些爬虫的前置知识，主要知识点有： 爬虫的概念和作用爬虫的流程【重要】http相关的复习 http和https概念和区别浏览器访问一个网址的过程爬虫中常用的请求头、响应头常见的响应状态码浏览器自带开发者工具的使用爬…...

编程日记 2025/7/21 21:27:56

飞帆控件：on_post_get 接口配置

在网页中写一个接口是很基础的要求。今天我们介绍一个工具，不用写代码，配置即可。先上链接： on_post_gethttps://fvi.cn/798来看看控件的配置： 使用这个控件，在网页中写 post/get 接口可以告别代码。或许能做到初…...

编程日记 2025/7/26 4:24:17

C++笔试题(金山科技新未来训练营）：

题目分布： 17道单选（每题3分）3道多选题（全对3分，部分对1分）2道编程题（每一道20分）。不过题目太多，就记得一部分了： 单选题： static变量的初始…...

编程日记 2025/7/29 5:28:29

Selenium-Java版（css表达式）

css表达式前言根据 tag名、id、class 选择元素 tag名 #id .class 选择子元素和后代元素定义语法根据属性选择验证CSS Selector 组选择按次序选择子节点父元素的第n个子节点父元素的倒数第n个子节点父元素的第几个某类型的子节点父元素的…...

编程日记 2025/7/28 23:03:48

19. 结合Selenium和YAML对页面实例化PO对象改造

19. 结合Selenium和YAML对页面实例化PO对象改造一、架构升级核心思路 1.1 改造核心目标 # 原始PO模式：显式定义元素定位 username (id, ctl00_MainContent_username)# 改造后PO模式：动态属性访问 self.username.send_keys(Tester) # 自动触发元素定…...

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

MySQL——5、基本查询

表的增删改查 1、Create1.1、单行数据全列插入1.2、多行数据指定列插入1.3、插入否则更新1.4、替换 2、Retrieve2.1、select列2.2、where条件2.3、结果排序2.4、筛选分页结果 3、Update4、Delete4.1、删除数据4.2、截断表 5、插入查询结果6、聚合函数7、group by子句的使用8、实…...

编程日记 2025/7/28 5:37:36

ngx_http_referer_module 模块概述

一、使用场景防盗链仅允许本站或特定域名的页面直接引用图片、视频等资源，拒绝第三方网站直接嵌入。流量控制阻止来自社交媒体、搜索引擎或未知来源的大量自动化抓取。安全审计简易记录并过滤可疑 Referer，以减少非法请求。注意 Referer 头可被伪造…...

编程日记 2025/7/10 21:53:08

Go语言--语法基础5--基本数据类型--类型转换

Go 编程语言中 if 条件语句的语法如下： 1、基本形式 if 布尔表达式 { /* 在布尔表达式为 true 时执行 */ } If 在布尔表达式为 true 时，其后紧跟的语句块执行，如果为 false 则不执行。 package main import "fmt" …...

编程日记 2025/7/21 21:09:24

用golang实现二叉搜索树（BST）

目录一、概念、性质二、二叉搜索树的实现1. 结构2. 查找3. 插入4. 删除5. 中序遍历中序前驱/后继结点一、概念、性质二叉搜索树（Binary Search Tree），简写BST，又称为二叉查找树它满足： 空树是一颗二叉搜索树对…...

编程日记 2025/7/16 1:46:29

基于FPGA的电子万年历系统开发,包含各模块testbench

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述基于FPGA的电子万年历系统开发,包含各模块testbench。主要包含以下核心模块： 时钟控制模块：提供系统基准时钟和计时功能。日历计算模块&#xff1a…...

编程日记 2025/7/28 16:54:54

上位机知识篇---Web

文章目录前言前言本文简单介绍了Web。...

编程日记 2025/7/17 23:44:04

2025 ISCC 练武赛Pwn-wp(含附件)

前言去年个人赛报名了忘记打了(笑), 所以这应该算是我第一次参加ISCC, 体验也是非常非常非常非常的cha(第四声)!!! 主办方也是非常幽默，pwn和web都是公用容器，那web最后都被当成玩具玩坏了下面是这次练武题的pwn所有附件通过网盘分享的文件&#xf…...

编程日记 2025/7/25 12:16:05

LeetCode Hot100刷题——除自身以外数组的乘积

238. 除自身以外数组的乘积给你一个整数数组 nums，返回数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积。题目数据保证数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位整数范围内。请不要使用除法&a…...

编程日记 2025/7/23 1:23:47

IDEA - Windows IDEA 代码块展开与折叠（基础折叠操作、高级折叠操作）

一、基础折叠操作折叠当前代码块：Ctrl - # 操作方式按下【Ctrl】键，再按下【-】键展开当前代码块：Ctrl # 操作方式按下【Ctrl】键，再按下【】键折叠所有代码块：Ctrl Shift - # 操作方式按下【Ctrl】…...

编程日记 2025/7/28 10:49:51

javaSE.Map

Map存储映射关系。键值对。key-value 左边值映射着右边的值，左边相当于钥匙，开到右边的门获取得到信息。 get👇put 是否存在该key👇containsKey() map.values👇 entrySet👇 entrySet()获取map中所有的键…...

编程日记 2025/7/24 22:05:35

Python Requests库完全指南：从入门到精通

引言在Python的生态系统中，requests库以其简洁优雅的API设计和强大的功能，成为HTTP请求处理领域的标杆工具。无论是数据爬虫开发、API接口调用，还是自动化测试场景，requests都能将复杂的网络交互简化为几行可读性极高的代码。相…...

编程日记 2025/7/15 3:14:36

1.QPushBotton 以及对象树

目录 1. 创建第一个Qt程序 1.1 初始化设置 🍐 选择存储位置 🍊 Kit 🍋 类信息 🍌 项目管理 1.2 代码 🍉 main.cpp 🍇widget.h 🍓 widget.cpp 1.3 .pro文件 🍈 常见模块…...

编程日记 2025/7/26 15:32:25

GO语言语法---For循环、break、continue

文章目录 1. 基本for循环（类似其他语言的while）2. 经典for循环（初始化;条件;后续操作）3. 无限循环4. 使用break和continue5 . 带标签的循环（可用于break/continue指定循环）1、break带标签2、continue带标签…...

编程日记 2025/7/28 23:27:52

网络编程-select（二）

一、I/O多路复用 1、为什么要多路复用之前开启多线程能实时接收数据，并且也不是一次性连接服务。但毕竟是一请求一连接，每有一个客户端向服务端发起请求，就会创建一个线程，当请求达到上千上万，就会创建上千上万的线…...

编程日记 2025/7/24 21:04:48

2025年PMP 学习十九第12章项目采购管理

2025年PMP 学习十九第12章项目采购管理序号过程过程组1规划采购管理规划2实施采购执行3控制采购监控4合同管理- 文章目录 2025年PMP 学习十九第12章项目采购管理12 项目采购管理建立战略合作伙伴关系的意义：细化采购步骤 12.1 规划采购管理1. **定义与作用**2…...

编程日记 2025/7/24 1:51:15

10.11 LangGraph多角色Agent开发实战：生产级AI系统架构与性能优化全解析

LangGraph 项目：High-level API for Multi-actor Agents 关键词：LangGraph 多角色 Agent, 状态管理, 持久化机制, 工作流编排, 生产级 AI 系统 1. LangGraph 设计哲学与架构演进 LangGraph 是 LangChain 生态中首个面向多角色协作 Agent 的高阶 API 框架，其核心设计思想可…...

编程日记 2025/7/19 11:21:23

计算机网络概要

⽹络相关基础知识协议两设备之间使⽤光电信号传输信息数据要想传递不同信息那么⼆者ᳵ就需要约定好的数据格式层封装继承多态是计算机的性质它们⽀持了软硬件分层的实现同层协议可以ᳵ接通信同层协议ᳵ不直接通信是各⾃调⽤下层提供的结构能⼒完成通信分层…...

编程日记 2025/7/14 18:12:23

Visual Studio已更新为17.14+集成deepseek实现高效编程

01 Visual Studio 2022 v17.14。此更新侧重于全面提供出色的开发人员体验，侧重于稳定性和安全性以及 AI 改进。 02 GPT-4o代码完成模式我们非常高兴地宣布，新的 GPT-4o Copilot 代码完成模型现已在 Visual Studio 17.14 中为 GitHub Copilot 用户…...

编程日记 2025/7/24 15:35:03

axios的基本使用

1. Axios概述 Axios 是一个基于 Promise 的 HTTP 客户端库，专为浏览器和 Node.js 设计，用来发送AJAX请求。可以通过npm install -g axios安装axios库。Axios有以下特征： 跨平台兼容性：同一套代码可运行于浏览器和 Node.js。在浏…...

编程日记 2025/7/24 16:42:07

【第三十六周】LoRA 微调方法

LoRA 摘要Abstract文章信息引言方法LoRA的原理LoRA在Transformer中的应用补充其他细节实验与分析LoRA的使用论文实验结果分析总结摘要本篇博客介绍了LoRA（Low-Rank Adaptation），这是一种面向大规模预训练语言模型的参数高效微调方法&…...

编程日记 2025/7/29 8:19:01

fcQCA模糊集定性比较分析法-学习笔记

模糊集定性比较分析（fsQCA，Fuzzy-set Qualitative Comparative Analysis） 是一种结合了定性和定量元素的研究方法，用于分析中小样本数据中的复杂因果关系。 1. 理解基础概念 QCA的核心思想： 基于集合论和布尔代数&a…...

编程日记 2025/7/27 16:22:35

基于WebRTC的实时语音对话系统：从语音识别到AI回复

基于WebRTC的实时语音对话系统：从语音识别到AI回复在当今数字化时代，实时语音交互已成为人机界面的重要组成部分。本文将深入探讨一个基于WebRTC技术的实时语音对话系统，该系统集成了语音识别(ASR)、大语言模型(LLM)和语音合成(TTS)技术&am…...

编程日记 2025/7/21 1:17:36

Text2SQL:自助式数据报表开发---0517

Text2SQL技术早期阶段：依赖于人工编写的规则模板来匹配自然语言和SQL语句之间的对应关系机器学习阶段：采用序列到序列模型等机器学习方法来学习自然语言与SQL之间的关系 LLM阶段：借助LLM强大的语言理解和代码生成能力，利用提示…...

编程日记 2025/7/27 1:30:07

关于 Web 漏洞原理与利用：1. SQL 注入（SQLi）

一、原理： 拼接 SQL 语句导致注入 SQL 注入的根本原因是：开发者将用户的输入和 SQL 语句直接拼接在一起，没有任何过滤或校验，最终被数据库“当作语句”执行了。这就像是我们给数据库写了一封信，结果攻击者在我们的…...

编程日记 2025/7/27 22:18:31

【NLP 75、如何通过API调用智谱大模型】

事事忘记，事事等待，事事自愈 —— 25.5.18 一、调用智谱大模型 zhipuai.model_api.invoke()：调用智谱 AI 的大模型（如 ChatGLM）进行文本生成或推理，支持同步请求。参数列表参数名类型是否必需默认值说…...

编程日记 2025/7/22 11:06:15

【RabbitMQ】 RabbitMQ高级特性（二）

文章目录一、重试机制1.1、重试配置1.2、配置交换机&队列1.3、发送消息1.4、消费消息1.5、运行程序1.6、手动确认二、TTL2.1、设置消息的TTL2.2、设置队列的TTL2.3、两者区别三、死信队列6.1 死信的概念3.2 代码示例3.2.1、声明队列和交换机3.2.2、正常队列绑定死信交…...

编程日记 2025/7/22 2:10:13

目录

引言