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

Vue3源码学习3-结合vitetest来实现mini-vue

news 来源：原创 2025/5/17 9:30:08

文章目录

前言
- ✅ 当前已实现模块汇总（mini-vue）
- ✅ 每个模块简要源码摘要
- - 1. `reactive.ts`
  - 2. `effect.ts`
  - 3. `computed.ts`
  - 4. `ref.ts`
  - 5. `toRef.ts`
  - 6. `toRefs.ts`
- ✅ 下一阶段推荐目标
- 所有核心模块对应的 `__tests__` 测试文件，**带完整注释**
- ✅ `reactive.spec.ts`
- ✅ `effect.spec.ts`
- ✅ `computed.spec.ts`
- ✅ `ref.spec.ts`
- ✅ `toRefs.spec.ts`
- ✅ 总结：你已支持的模块对应测试

前言

当前已完成的 mini-vue 项目功能模块列表，以及每个模块对应 Vue 3 中的核心功能对照和简要源码说明：

✅ 当前已实现模块汇总（mini-vue）

模块	文件名	对应 Vue 3 功能	描述
响应式核心	`reactive.ts`	`Vue.reactive`	通过 Proxy 实现深层响应式对象追踪
副作用收集	`effect.ts`	`Vue.effect`	依赖自动收集、调度器（scheduler）、懒执行（lazy）
计算属性	`computed.ts`	`Vue.computed`	支持懒计算、缓存、依赖追踪、调度触发
基本 Ref	`ref.ts`	`Vue.ref`	包装原始值为响应式对象，追踪 `value` 的读写操作
对象属性转 Ref	`toRef.ts`	`Vue.toRef`	将 reactive 对象的某个属性变为可独立响应式的 Ref
批量属性转 Ref	`toRefs.ts`	`Vue.toRefs`	将整个对象的所有属性都转为 Ref，支持结构保持响应式

✅ 每个模块简要源码摘要

1. `reactive.ts`

import { track, trigger } from './effect'export function reactive<T extends object>(target: T): T {return new Proxy(target, {get(target, key, receiver) {track(target, key)return Reflect.get(target, key, receiver)},set(target, key, value, receiver) {const result = Reflect.set(target, key, value, receiver)trigger(target, key)return result}})
}

2. `effect.ts`

type EffectFn = () => void
interface EffectOptions {lazy?: booleanscheduler?: () => void
}let activeEffect: EffectFn | null = null
const targetMap = new WeakMap()export function effect(fn: EffectFn, options: EffectOptions = {}) {const effectFn = () => {activeEffect = effectFnconst result = fn()activeEffect = nullreturn result}if (options.scheduler) effectFn.scheduler = options.schedulerif (!options.lazy) effectFn()return effectFn
}export function track(target: object, key: string | symbol) { ... }
export function trigger(target: object, key: string | symbol) { ... }

3. `computed.ts`

export function computed<T>(getter: () => T) {let value: Tlet dirty = trueconst runner = effect(getter, {lazy: true,scheduler: () => {dirty = truetrigger(obj, 'value')}})const obj = {get value() {track(obj, 'value')if (dirty) {value = runner()dirty = false}return value}}return obj
}

4. `ref.ts`

export class RefImpl<T> {private _value: Tconstructor(value: T) {this._value = value}get value() {track(this, 'value')return this._value}set value(newVal: T) {if (newVal !== this._value) {this._value = newValtrigger(this, 'value')}}
}export function ref<T>(value: T) {return new RefImpl(value)
}

5. `toRef.ts`

export function toRef<T extends object, K extends keyof T>(obj: T, key: K) {return {get value() {track(obj, key)return obj[key]},set value(val) {obj[key] = valtrigger(obj, key)}}
}

6. `toRefs.ts`

import { toRef } from './toRef'export function toRefs<T extends object>(obj: T) {const result: any = {}for (const key in obj) {result[key] = toRef(obj, key)}return result
}

✅ 下一阶段推荐目标

模块	Vue 功能	说明
`isRef`	`Vue.isRef()`	判断对象是否为 ref 实例
`unref`	`Vue.unref()`	解包 ref 或返回原始值
`watch`	`Vue.watch()`	监听响应式值变化，执行回调
`readonly`	`Vue.readonly()`	创建只读响应式对象，禁止写入
`shallowRef`	`Vue.shallowRef()`	创建浅层响应式对象

所有核心模块对应的 `tests` 测试文件，带完整注释

✅ `reactive.spec.ts`

import { describe, it, expect } from 'vitest'
import { reactive } from '../src/reactive'
import { effect } from '../src/effect'describe('mini-vue: reactive', () => {it('should track and trigger on get/set', () => {const obj = reactive({ count: 0 })let dummy: number = 0effect(() => {dummy = obj.count})expect(dummy).toBe(0)// 修改属性 → 触发 trigger → 重新执行 effectobj.count++expect(dummy).toBe(1)})
})

✅ `effect.spec.ts`

import { describe, it, expect, vi } from 'vitest'
import { reactive } from '../src/reactive'
import { effect } from '../src/effect'describe('mini-vue: effect', () => {it('should re-run effect on dependency change', () => {const state = reactive({ num: 1 })let dummyeffect(() => {dummy = state.num})expect(dummy).toBe(1)state.num++expect(dummy).toBe(2)})it('should allow scheduler', () => {const state = reactive({ foo: 1 })const scheduler = vi.fn()const runner = effect(() => state.foo, { scheduler })// 不会立即运行 effect，而是执行 schedulerstate.foo++expect(scheduler).toHaveBeenCalled()})
})

✅ `computed.spec.ts`

import { describe, it, expect, vi } from 'vitest'
import { reactive } from '../src/reactive'
import { computed } from '../src/computed'
import { effect } from '../src/effect'describe('mini-vue: computed', () => {it('should compute lazily and cache', () => {const state = reactive({ count: 1 })const getter = vi.fn(() => state.count + 1)const c = computed(getter)// 没访问前不会调用 getterexpect(getter).not.toHaveBeenCalled()// 第一次访问，计算并缓存expect(c.value).toBe(2)expect(getter).toHaveBeenCalledTimes(1)// 第二次访问，走缓存c.valueexpect(getter).toHaveBeenCalledTimes(1)// 修改依赖，缓存失效state.count++expect(c.value).toBe(3)expect(getter).toHaveBeenCalledTimes(2)})it('should work inside effect', () => {const state = reactive({ count: 1 })const c = computed(() => state.count)let dummyeffect(() => {dummy = c.value})expect(dummy).toBe(1)state.count++expect(dummy).toBe(2)})
})

✅ `ref.spec.ts`

import { describe, it, expect } from 'vitest'
import { ref } from '../src/ref'
import { effect } from '../src/effect'describe('mini-vue: ref', () => {it('should hold a value', () => {const r = ref(1)expect(r.value).toBe(1)})it('should be reactive', () => {const r = ref(1)let dummyeffect(() => {dummy = r.value})expect(dummy).toBe(1)r.value++expect(dummy).toBe(2)})it('should not trigger if value not changed', () => {const r = ref(1)let dummy = 0let calls = 0effect(() => {calls++dummy = r.value})expect(calls).toBe(1)r.value = 1 // 设置相同值，effect 不应重新执行expect(calls).toBe(1)})
})

✅ `toRefs.spec.ts`

import { describe, it, expect } from 'vitest'
import { reactive } from '../src/reactive'
import { toRef } from '../src/toRef'
import { toRefs } from '../src/toRefs'
import { effect } from '../src/effect'describe('mini-vue: toRef / toRefs', () => {it('toRef should convert property to ref', () => {const obj = reactive({ count: 1 })const countRef = toRef(obj, 'count')let dummyeffect(() => {dummy = countRef.value})expect(dummy).toBe(1)obj.count++expect(dummy).toBe(2)countRef.value = 3expect(obj.count).toBe(3)})it('toRefs should convert all properties to refs', () => {const obj = reactive({ count: 1, name: 'vue' })const refs = toRefs(obj)expect(refs.count.value).toBe(1)expect(refs.name.value).toBe('vue')refs.count.value++expect(obj.count).toBe(2)obj.name = 'mini-vue'expect(refs.name.value).toBe('mini-vue')})
})

✅ 总结：你已支持的模块对应测试

模块名	测试文件	已验证功能
`reactive`	`reactive.spec.ts`	get/set 追踪触发
`effect`	`effect.spec.ts`	基础响应式绑定、scheduler 调度
`computed`	`computed.spec.ts`	懒计算、缓存、响应式依赖更新
`ref`	`ref.spec.ts`	value 包装、响应式触发、去重
`toRef`/`toRefs`	`toRefs.spec.ts`	属性映射为 ref、保持响应式联动

Vue3源码学习3-结合vitetest来实现mini-vue

文章目录前言✅ 当前已实现模块汇总（mini-vue）✅ 每个模块简要源码摘要1. reactive.ts2. effect.ts3. computed.ts4. ref.ts5. toRef.ts6. toRefs.ts ✅ 下一阶段推荐目标所有核心模块对应的 __tests__ 测试文件，**带完整注释**✅ reactive.…...

编程日记 2025/5/17 9:30:08

K8S - 从零构建 Docker 镜像与容器

一、基础概念 1.1 镜像（Image） “软件的标准化安装包” ，包含代码、环境和配置的只读模板。技术解析镜像由多个层组成，每层对应一个Dockerfile指令： 应用代码 → 运行时环境 → 系统工具链 → 启动配置核心特性…...

编程日记 2025/5/17 9:18:10

贪心算法求解边界最大数

贪心算法求解边界最大数（拼多多2504、排列问题） 多多有两个仅由正整数构成的数列 s1 和 s2，多多可以对 s1 进行任意次操作，每次操作可以置换 s1 中任意两个数字的位置。多多想让数列 s1 构成的数字尽可能大，但是不能比…...

编程日记 2025/5/17 9:14:29

C++类和对象(中)

类的默认成员函数默认成员函数就是用户没有显式实现，编译器会自动生成的成员函数。一个类，我们不写的情况下编译器会默认生成6个默认成员函数，C11以后还会增加两个默认成员函数，移动构造和移动赋值。默认成员函数很重要&#x…...

编程日记 2025/5/4 21:09:05

（Go Gin）Gin学习笔记（五）会话控制与参数验证：Cookie使用、Sessions使用、结构体验证参数、自定义验证参数

1. Cookie介绍 HTTP是无状态协议，服务器不能记录浏览器的访问状态，也就是说服务器不能区分两次请求是否由同一个客户端发出Cookie就是解决HTTP协议无状态的方案之一，中文是小甜饼的意思Cookie实际上就是服务器保存在浏览器上的一段信息。浏览…...

编程日记 2025/5/17 9:15:44

Windows 10 环境二进制方式安装 MySQL 8.0.41

文章目录初始化数据库配置文件注册成服务启停服务链接服务器登录之后重置密码卸载初始化数据库 D:\MySQL\MySQL8.0.41\mysql-8.0.41-winx64\mysql-8.0.41-winx64\bin\mysqld -I --console --basedirD:\MySQL\MySQL8.0.41\mysql-8.0.41-winx64\mysql-8.0.41-winx64 --datadi…...

编程日记 2025/5/15 7:49:32

Day.js一个2k轻量级的时间日期处理库

dayjs介绍 dayjs是一个极简快速2kB的JavaScript库，可以为浏览器处理解析、验证、操作和显示日期和时间，它的设计目标是提供一个简单、快速且功能强大的日期处理工具，同时保持极小的体积（仅 2KB 左右）。 Day.js 的 API…...

编程日记 2025/5/17 9:11:58

SQL实战：05之间隔连续数问题求解

概述最近刷题时遇到一些比较有意思的题目，之前多次遇到一些求解连续数的问题，这次遇到了他们的变种，连续数可以间隔指定的数也视为是一个完整的“连续”。针对连续数的这类问题我们之前讲的可以利用等差数列的思想来解决，然而现…...

编程日记 2025/5/14 10:14:04

Windows下Dify安装及使用

Dify安装及使用 Dify 是开源的 LLM 应用开发平台。提供从 Agent 构建到 AI workflow 编排、RAG 检索、模型管理等能力，轻松构建和运营生成式 AI 原生应用。比 LangChain 更易用。前置条件 windows下安装了docker环境-Windows11安装Docker-CSDN博客下载 Git下载…...

编程日记 2025/5/15 14:27:01

回归分析丨基于R语言复杂数据回归与混合效应模型【多水平/分层/嵌套】技术与代码

回归分析是科学研究特别是生态学领域科学研究和数据分析十分重要的统计工具，可以回答众多科学问题，如环境因素对物种、种群、群落及生态系统或气候变化的影响；物种属性和系统发育对物种分布（多度）的影响等。纵观涉及数…...

编程日记 2025/5/1 6:18:18

EasyRTC嵌入式音视频实时通话SDK技术，打造低延迟、高安全的远程技术支持

一、背景在当今数字化时代，远程技术支持已成为解决各类技术问题的关键手段。随着企业业务的拓展和技术的日益复杂，快速、高效地解决远程设备与系统的技术难题变得至关重要。EasyRTC作为一款高性能的实时通信解决方案，为远程技术支持提供了创…...

编程日记 2025/5/1 6:18:17

webrtc ICE 打洞总结

要搞清webrtc ICE连接是否能成功 ， 主要是搞懂NAT NAT 类型简单来说一是本地的ip和端口决定外部的 ip和端口(和目的Ip和端口无关) ， （这种情况又分为 ， 无限制，仅限制 ip ， 限制ip和port , 也就是…...

编程日记 2025/5/1 6:18:15

AI开发者的Docker实践：汉化（中文），更换镜像源，Dockerfile，部署Python项目

AI开发者的Docker实践：汉化（中文），更换镜像源，Dockerfile，部署Python项目 Dcoker官网1、核心概念镜像 (Image)容器 (Container)仓库 (Repository)DockerfileDocker Compose 2、Docker 的核心组件Docker 引擎…...

编程日记 2025/5/13 20:09:33

4.30阅读

一. 原文阅读 Passage 7（推荐阅读时间：6 - 7分钟） In department stores and closets all over the world, they are waiting. Their outward appearance seems rather appealing because they come in a variety of styles, textures, and …...

编程日记 2025/5/1 6:17:13

区块链：跨链协的技术突破与产业重构

引言：区块链的“孤岛困境”与跨链的使命区块链技术自诞生以来，凭借去中心化、透明性和安全性重塑了金融、供应链、身份认证等领域。然而，不同区块链平台间的互操作性缺失，如同“数据与价值的孤岛”，严重限制…...

编程日记 2025/5/3 13:55:27

Github 热点项目 Qwen3 通义千问全面发布新一代智能语言模型系统

阿里云Qwen3模型真是黑科技！两大模式超贴心——深度思考能解高数题，快速应答秒回日常梗。支持百种语言互译，跨国客服用它沟通零障碍！打工人福音是内置API工具，查天气做报表张口就来。字） 1Qwen3 今日星标 …...

编程日记 2025/5/1 6:17:12

有状态服务与无状态服务：差异、特点及应用场景全解

有状态服务和无状态服务是在分布式系统和网络编程中常提到的概念，下面为你详细介绍： 一、无状态服务无状态服务指的是该服务的单次请求处理不依赖之前的请求信息，每个请求都是独立的。服务端不会存储客户端的上下文信息，每次请…...

编程日记 2025/5/1 6:17:11

【网络入侵检测】基于源码分析Suricata的引擎日志配置解析

【作者主页】只道当时是寻常【专栏介绍】Suricata入侵检测。专注网络、主机安全，欢迎关注与评论。 1. 概要 👋 Suricata 的引擎日志记录系统主要记录该引擎在启动、运行以及关闭期间应用程序的相关信息，如错误信息和其他诊断信息&#xff0c…...

编程日记 2025/5/1 6:16:10

Attention层的FLOPs计算

前置知识设矩阵 A 的维度为 mn，矩阵 B 的维度为 np，则它们相乘后得到矩阵 C 的维度为 mp。其中，C 中每个元素的计算需要进行 n 次乘法和 n−1 次加法。也就是说，总的浮点运算次数（FLOPs）约为 m p (2n) …...

编程日记 2025/5/3 6:16:46

支付APP如何做好网络安全防护

支付APP的网络安全防护需要从技术、管理、用户行为等多层面综合施策，以下为核心措施： 一、技术防御：构建安全底层数据加密传输加密：使用最新协议（如TLS 1.3）对交易数据加密&…...

编程日记 2025/5/16 7:17:37

Missashe考研日记-day31

Missashe考研日记-day31 0 写在前面芜湖，五一前最后一天学习圆满结束，又到了最喜欢的放假环节，回来再努力了。 1 专业课408 学习时间：2h学习内容： OK啊，今天把文件系统前两节的内容全部学完了&#xf…...

编程日记 2025/5/8 13:49:39

二叉树的路径总和问题（递归遍历，回溯算法）

112. 路径总和 - 力扣（LeetCode） class Solution { private: bool traversal(TreeNode*cur,int count){if(!cur->left&&!cur->right&&count0){return true;}if(!cur->left&&!cur->right){return false;}if(cur-…...

编程日记 2025/5/1 6:16:08

Java学习计划与资源推荐（入门到进阶、高阶、实战）

🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息文章目录 Java学习计划与资源推荐**一、筑基阶段（2-3个月）****二、进阶开发阶段（2个月）****三、高级突破阶段（2-3个月）****四、项目实战与竞…...

编程日记 2025/5/13 2:53:06

动态规划 -- 子数组问题

本篇文章中主要讲解动态规划系列中的几个经典的子数组问题。 1 最大子数组和 53. 最大子数组和 - 力扣（LeetCode） 解析题目： 子数组是一个数组中的连续部分，也就是说，如果一个数组以 nums[i]结尾，那么有两…...

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

Sehll编程的函数于数组

目录一、函数 1.1、定义函数 1.2、查看、删除函数 1.3、函数的返回值 1.4、函数的参数传递 1.5、函数的作用范围 1.6、函数递归二、数组 2.1、声明数组 2.2、数组格式定义 2.3、数组调用 2.4、删除数组一、函数 shell编程中，函数用于封装一段可以重…...

编程日记 2025/5/1 6:15:05

flutter 专题六十四在原生项目中集成Flutter

概述使用Flutter从零开始开发App是一件轻松惬意的事情，但对于一些成熟的产品来说，完全摒弃原有App的历史沉淀，全面转向Flutter是不现实的。因此使用Flutter去统一Android、iOS技术栈，把它作为已有原生App的扩展能力，…...

编程日记 2025/5/4 16:59:04

AI生成Flutter UI代码实践（一）

之前的杂谈中有提到目前的一些主流AI编程工具，比如Cursor，Copilot，Trea等。因为我是Android 开发，日常使用Android Studio，所以日常使用最多的还是Copilot，毕竟Github月月送我会员，白嫖还是挺香…...

编程日记 2025/5/1 6:15:04

spring boot中@Validated

在 Spring Boot 中，Validated 是用于触发参数校验的注解，通常与 JSR-303/JSR-380（Bean Validation）提供的校验注解一起使用。以下是常见的校验注解及其用法： 1. 基本校验注解这些注解可以直接用于字段…...

编程日记 2025/5/1 6:14:02

VBA代码解决方案第二十四讲:EXCEL中，如何删除重复数据行

《VBA代码解决方案》(版权10028096)这套教程是我最早推出的教程，目前已经是第三版修订了。这套教程定位于入门后的提高，在学习这套教程过程中，侧重点是要理解及掌握我的“积木编程”思想。要灵活运用教程中的实例像搭积木一样把自己喜欢的代码…...

编程日记 2025/5/1 6:13:00

SpringBoot+EasyExcel+Mybatis+H2实现导入

文章目录 SpringBootEasyExcelMybatisH2实现导入1.准备工作1.1 依赖管理1.2 配置信息properties1.3 H2数据库1.4 Spring Boot 基础概念1.5 Mybatis核心概念 1.6 EasyExcel核心概念 2.生成Excel数据工具类-随机字符串编写生成Excel的java文件 3.导入功能并且存入数据库3.1 返回结…...

编程日记 2025/5/1 6:13:00

算法四习题 1.3

数组实现栈 #include <iostream> #include <vector> #include <stdexcept> using namespace std;class MyStack { private:vector<int> data; // 用于存储栈元素的数组public:// 构造函数MyStack() {}// 入栈操作void push(int val) {data.push_back…...

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

el-tabs与table样式冲突导致高度失效问题解决(vue2+elementui)

背景正常的el-table能根据父容器自动计算剩余高度，并会在列表中判断自适应去放出滚动条。而el-tabs本身就是自适应el-tab-pane内容的高度来进行自适应调节，这样就会导致el-table计算不了当前剩余的高度，所以当el-tabs里面包含el-table时&am…...

编程日记 2025/5/1 6:12:59

Access开发：轻松一键将 Access 全库表格导出为 Excel

hi，大家好呀！ 在日常工作中，Access 常常是我们忠实的数据管家，默默守护着项目信息、客户列表或是库存记录。它结构清晰，录入便捷，对于许多中小型应用场景来说，无疑是个得力助手。然而&#xff…...

编程日记 2025/5/5 21:40:03

合并多个Excel文件到一个文件，并保留格式

合并多个Excel文件到一个文件，并保留格式需求介绍第一步：创建目标文件第二步：创建任务列表第三步：合并文件第四步：处理合并后的文件之调用程序打开并保存一次之前生成的Excel文件第五步：处理合并后的文件之…...

编程日记 2025/5/1 6:12:58

使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第十讲)

这一期我们讲解demo中登录、ok按键的回调函数以及界面的美化，以下是上期界面的图片如图所示： 首先点击界面在右侧的工具栏中调配颜色渐变色，具体设置如下图所示： 然后是关于界面内框也就是容器的美化，具体如下图所示…...

编程日记 2025/5/1 6:12:57

论文笔记（八十二）Transformers without Normalization

Transformers without Normalization 文章概括Abstract1 引言2 背景：归一化层3 归一化层做什么？4 动态 Tanh （Dynamic Tanh (DyT)）5 实验6 分析6.1 DyT \text{DyT} DyT 的效率6.2 tanh \text{tanh} tanh 和 α α α 的消融实验…...

编程日记 2025/5/1 6:11:56

Mysql之数据库基础

🌟 各位看官好，我是maomi_9526！ 🌍 种一棵树最好是十年前，其次是现在！ 🚀 今天来学习Mysql的相关知识。 👍 如果觉得这篇文章有帮助，欢迎您一键三连，分享给更…...

编程日记 2025/5/7 2:02:40

shell（5）

位置参数变量 1.介绍当我们执行一个shell脚本时,如果希望获取到命令行的参数信息,就可以使用到位置参数变量. 比如：./myshell.sh100 200,这就是一个执行shell的命令行,可以在myshell脚本中获取到参数信息. 2.基本语法 $n(功能描述：n为数字,$0代表命令…...

编程日记 2025/5/1 6:11:53

VARIAN安捷伦真空泵维修清洁保养操作SOP换油操作流程内部转子图文并茂内部培训手侧

VARIAN安捷伦真空泵维修清洁保养操作SOP换油操作流程内部转子图文并茂内部培训手侧...

编程日记 2025/5/1 6:11:52

动画震动效果

项目场景： 提示：这里简述项目相关背景： 在有的相关目中特别是在C端一般都要求做的炫酷一些，这就需要一些简易的动画效果，这里就弄了一个简易的震动的效果如下视频所示让图标一大一小的震动视频分析： 提…...

编程日记 2025/5/15 7:44:06

DB-GPT V0.7.1 版本更新：支持多模态模型、支持 Qwen3 系列，GLM4 系列模型、支持Oracle数据库等

V0.7.1版本主要新增、增强了以下核心特性 🍀DB-GPT支持多模态模型。 🍀DB-GPT支持 Qwen3 系列，GLM4 系列模型。 🍀 MCP支持 SSE 权限认证和 SSL/TLS 安全通信。 🍀 支持Oracle数据库。 🍀 支持 Infini…...

编程日记 2025/5/1 6:10:50

C++23 std::invoke_r：调用可调用 (Callable) 对象 (P2136R3)

文章目录引言背景知识回顾可调用对象C17的std::invoke std::invoke_r的诞生提案背景std::invoke_r的定义参数和返回值异常说明 std::invoke_r的使用场景指定返回类型丢弃返回值 std::invoke_r与std::invoke的对比功能差异使用场景差异结论引言在C的发展历程中，…...

编程日记 2025/5/1 6:10:49

pymysql

参数（会导致SQL注入） import pymysql# 创建数据库连接 conn pymysql.connect(user "root",password "root",host "127.0.0.1",port 3306,database "test" )# 创建游标对象 cur conn.cursor(cursorpymysql.…...

编程日记 2025/5/16 13:03:29

基于Spring Boot + Vue 项目中引入deepseek方法

准备工作在开始调用 DeepSeek API 之前，你需要完成以下准备工作： 1.访问 DeepSeek 官网，注册一个账号。 2.获取 API 密钥：登录 DeepSeek 平台，进入 API 管理页面。创建一个新的 API 密钥（API Key&#x…...

编程日记 2025/5/1 6:09:46

Spring Boot集成Kafka并使用多个死信队列的完整示例

以下是Spring Boot集成Kafka并使用多个死信队列的完整示例，包含代码和配置说明。 1. 添加依赖 (pom.xml) <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId&…...

编程日记 2025/5/1 6:09:45

全面了解CSS语法 ! ! !

CSS（层叠样式表）是网页设计的灵魂之一，它赋予了网页活力与美感。无论是为一个简单的个人博客增添色彩，还是为复杂的企业网站设计布局，CSS都是不可或缺的工具。那么，CSS语法到底是什么样的呢？它背…...

编程日记 2025/5/13 21:51:22

Springboot使用ThreadLocal提供线程局部变量，传递登录用户名

文章目录概述使用创建ThreadLocalUtil工具类在登录拦截器中使用ThreadLocal存储登录用户名在/userInfo接口中获取登录用户名注意事项参考视频概述使用创建ThreadLocalUtil工具类 utils/ThreadLocalUtil.java package org.example.utils;/*** ThreadLocal 工具类*/ Supp…...

编程日记 2025/5/1 6:08:43

排序算法——选择排序

一、介绍「排序算法sortingalgorithm」用于对一组数据按照特定顺序进行排列。排序算法有着广泛的应用，因为有序数据通常能够被更有效地查找、分析和处理。如图所示，排序算法中的数据类型可以是整数、浮点数、字符或字符串等。排序的判断规则可根据需求…...

编程日记 2025/5/1 6:08:42

AlphaFold蛋白质结构数据库介绍

AlphaFold Protein Structure Database (AlphaFold DB) 是 DeepMind + EMBL-EBI 合作开发的公开蛋白质结构预测数据库，是利用 AlphaFold2/AlphaFold3 AI模型预测的全基因组级蛋白质三维结构库。网址： https://alphafold.ebi.ac.uk 项目内容主办单位DeepMind + EMBL-EBI上线…...

编程日记 2025/5/1 6:08:42

Roboflow标注数据集

使用Roboflow进行标注关键点标注目标检测标注图像分类标注分割标注 Roboflow是一款易于使用的在线图像标注。关键点标注每个图像的标注包括： 1、边界框坐标（每个物品应该有一个边界框，用*[x1,y1,x2,y2]*格式即左上角和右下角点描述&…...

编程日记 2025/5/1 6:08:41

文章目录

前言

✅ 当前已实现模块汇总（mini-vue）

✅ 每个模块简要源码摘要

1. reactive.ts

2. effect.ts

3. computed.ts

4. ref.ts

5. toRef.ts

6. toRefs.ts

✅ 下一阶段推荐目标

所有核心模块对应的 __tests__ 测试文件，带完整注释

✅ reactive.spec.ts

✅ effect.spec.ts

✅ computed.spec.ts

✅ ref.spec.ts

✅ toRefs.spec.ts