子雍手记 · 读源码的学习记录

Vue.js异步更新与nextTick机制深度解析（上篇）

Mon, 30 Jun 2025 05:05:47 GMT

连着改三次数据，页面只重渲染一次。setter 触发之后 watcher 去了哪里、nextTick 怎么把回调攒成一批一次冲掉，以及 Promise、MutationObserver、setImmediate、setTimeout 这条降级链为什么按这个顺序排。

Vue.js组件系统架构深度解析

Mon, 30 Jun 2025 04:43:59 GMT

一个普通对象是怎么变成功能完备的组件实例的：实例化与初始化流程、父子组件之间如何建立联系、插槽（含作用域插槽）如何分发，以及动态组件和异步组件的实现。

Vue.js状态管理模式：构建可扩展的应用架构

Mon, 30 Jun 2025 04:43:58 GMT

Vuex 的 state 其实是一个隐藏 Vue 实例的 data，getter 是它的 computed。顺着 3.6.2 的源码看 commit 走的那张扁平表、命名空间为什么只是个字符串前缀、插件为什么全挂在 subscribe 上，以及 Pinia 砍掉 mutation 之后换来了什么。

Vue.js依赖收集与追踪机制深度剖析

Mon, 30 Jun 2025 04:43:57 GMT

改一个数据，Vue 怎么知道该更新谁。Dep.target 是个全局变量配一个栈，Watcher 每次求值都重建一遍依赖表，computed 的缓存只是一个 dirty 标记。最后对照 Vue 3 的 targetMap 和 effect。

Vue.js异步更新与nextTick机制深度解析（下篇）

Mon, 30 Jun 2025 04:43:56 GMT

调度队列这一段：queueWatcher 怎么靠一张 has 表去重、队列为什么按 watcher id 升序跑（父组件先于子组件、用户 watcher 先于渲染 watcher）、无限更新循环是怎么被数出来的，以及 Vue 3 的 pre / post 两段队列。

Virtual DOM实现详解

Mon, 30 Jun 2025 04:43:54 GMT

VNode 是个普通对象，真正碰 DOM 的是 patch。这篇拆 Vue 2 的 VNode 字段、createElement 的两档规范化、patch 建树和销毁的顺序，再看 Vue 3 怎么把 diff 缩到编译期挑出来的那几个节点上。

Vue.js性能优化实践 - 基于内部机制的深度优化策略

Mon, 30 Jun 2025 04:43:53 GMT

响应式的开销落在初始化那一遍遍历上，所以 Object.freeze 和 shallowRef 能省掉它。v-memo、虚拟滚动、keep-alive 各自拿什么换什么，以及为什么这些数字只有在生产构建上量才算数。

Vue.js响应式系统核心原理

Mon, 30 Jun 2025 04:43:50 GMT

Vue 2 给每个属性装 getter/setter，数组靠换原型拦住七个方法，新增属性只能用 Vue.set 补一次。Vue 3 换成 Proxy 之后，哪些限制消失了，哪些还在。

Vue.js模板编译全流程详解

Mon, 30 Jun 2025 04:43:47 GMT

浏览器并不认识 v-if 和双花括号这些 Vue 语法。模板字符串怎么一步步变成可执行的 render 函数：解析、AST 生成、编译优化，以及运行时编译和预编译各自的适用场景。

Diff算法深度剖析 - Vue.js的DOM更新魔法

Mon, 30 Jun 2025 04:43:46 GMT

列表顺序一变，Vue 怎么知道该移动哪个节点、哪些原地不动。四个指针从两端往中间收，不命中才查 key 映射表；Vue 3 换成先削两端、再对中间求最长递增子序列。

Vue.js整体架构与设计理念

Mon, 30 Jun 2025 04:43:36 GMT

从 2.6.14 的目录划分入手：源码为什么按「跑在哪」切而不是按功能切，Vue 为什么是个函数不是 class，$mount 为什么被覆盖两次，以及 Vue 3 把这条边界画进了包名里。

Vue.js内部机制深度解析系列

Mon, 30 Jun 2025 04:43:23 GMT

11 篇拆 Vue 2 的源码：响应式怎么装到对象上、模板怎么变成 render 函数、一次赋值到 DOM 更新中间隔着几层队列。这一页说清每篇在回答什么问题，以及哪几条线可以分开读。

Bunni DEX 架构设计与代码实现深度技术分析

Sat, 07 Jun 2025 14:34:57 GMT

Bunni 这个名字底下是两套没有共用代码的合约。跟着 ZeframLou/bunni 走一遍 v1：一个 BunniKey 怎么变成一个 ERC-20、首笔存入的下限为什么挡不住抢跑、withdraw 为什么没有重入锁；再看换到 Uniswap v4 hooks 的 v2，一个取整方向怎么让它损失 840 万美元。

Uniswap V4 Hooks 指南

Thu, 05 Jun 2025 16:43:31 GMT

hook 的权限不写在任何注册表里，它编码在合约地址的低 14 位上，所以部署之前得先把地址挖出来。跟着 v4-core 读一遍：14 个权限位各占哪一位、unlock 那段账怎么结平、动态费率为什么是 fee 字段的最高位。

ngrok本地调试原理及Telegram mini app cookie path 问题

Tue, 02 Jul 2024 17:47:48 GMT

隧道是本地 agent 主动拨出去的，不是公网打进来。顺着这条链路核一遍 ngrok v3 改掉的命令和配置、免费版反转了的域名策略，以及 Telegram Mini App 调试时那个「Visit Site」拦截页到底挡住了谁。

TypeScript：从架构分层设计到IOC和AOP

Wed, 26 Jun 2024 04:07:16 GMT

容器按类型取实例、装饰器读出参数类型，这两件事都要求类型活到运行时，而 TypeScript 的类型编译完就没了。IoC 用 token 绕，AOP 用元数据绕，各自的代价写在这里。

Jotai v2: React状态管理的新篇章

Tue, 25 Jun 2024 10:18:05 GMT

v2 把 store 变成了公开 API。atom 里其实一个字节的状态都没有，值住在 store 的 WeakMap 里——理解了这件事，v2 改的那几处签名就都说得通了。

加密货币交易所十二：安全性和风险控制

Fri, 21 Jun 2024 18:57:42 GMT

「我们用了冷钱包和多签」说的是两件事，多签管谁能批准，冷热管私钥在不在联网机器上，两者正交。这篇拆这个矩阵、提现路径上四道闸各自拦的是哪一种攻击者，以及 API 签名为什么挡不住重放。

加密货币交易所十一：持仓管理

Fri, 21 Jun 2024 18:39:18 GMT

持仓表的主键到底是「用户 + 合约」还是「用户 + 合约 + 方向」，取决于支不支持双向持仓。这篇拆持仓数据模型、成交量涨了持仓量为什么可能不动、阶梯维持保证金的速算额是怎么来的，以及强平价怎么一步步解出来。

加密货币交易所十：订单处理流程

Fri, 21 Jun 2024 18:22:28 GMT

一笔订单从提交到终态要走完校验、预冻结保证金、撮合、成交后处理四段。这篇拆订单状态机的合法迁移（部分成交之后仍然可以撤单，已成交不行）、撮合引擎为什么必须单线程无 IO，以及吃穿三档的成交均价怎么算。

加密货币交易所九：市场数据系统

Fri, 21 Jun 2024 17:52:26 GMT

客户端拿到的订单簿是自己拼出来的：先拉一份快照，再把增量按序列号贴上去，中间漏一条就得整个重来。这篇讲这套快照加增量的对接协议、指数价格和标记价格为什么是两条链路，以及深度聚合把什么信息扔掉了。

加密货币交易所八：账户系统

Fri, 21 Jun 2024 17:29:05 GMT

账户里显示 1000，提现 800 却被拒。一个合约账户在一个币种上同时有四个数，只有一个是真正记在账上的。这篇拆这四个数的关系、全仓和逐仓下可用余额为什么算法不同，以及为什么金额不能用浮点数存。

加密货币交易所七：清算系统

Fri, 21 Jun 2024 17:11:25 GMT

结算、强平、清算是三件事，原文把它们混成了一件。这篇把它们拆开，再用一组能自己按计算器验一遍的数字走完已实现盈亏、开仓均价加权，以及反向合约为什么要用调和平均。

加密货币交易所六：风险管理系统

Fri, 21 Jun 2024 16:56:42 GMT

10 倍杠杆做多 BTC，开仓 50000，跌到 45000 会被强平吗？不会，45226 就到了。这一篇把强平价一步步算出来，再把强平、清算、穿仓、自动减仓这四个被混作一谈的环节拆开。

加密货币交易所五：交易引擎

Fri, 21 Jun 2024 16:25:05 GMT

拿一份六档的订单簿算一遍：市价买 15 张成交在什么均价、限价单剩下的部分怎么变成买一、价差为什么会被吃宽。撮合规则、订单簿的两层结构、崩溃之后怎么把它重建出来。

加密货币交易所四：用户接入系统

Fri, 21 Jun 2024 11:06:46 GMT

网页登录靠密码加 TOTP，API 走的却是另一条完全不过 2FA 的路。这一篇把签名怎么算、限流的两把尺子分别量什么、本地订单簿怎么和推送流对齐这几件事写到能照着实现。

加密货币交易所三：核心业务概念和实现

Fri, 21 Jun 2024 10:37:07 GMT

指数价格怎么加权、某家现货交易所掉线了权重怎么补、标记价格为什么取三个数的中位数、资金费率的溢价为什么不能拿标记价格去算。外加持仓量的四种加减规则。

加密货币交易所二：整体架构

Fri, 21 Jun 2024 09:39:19 GMT

分层不是为了画图好看。这一篇把五层的职责和一条更要紧的界线对上：加机器能扛住接入层和数据层，扛不住撮合引擎——一个交易对的订单簿只能有一个权威副本。

加密货币交易所一：合约交易基础概念

Fri, 21 Jun 2024 08:52:38 GMT

永续合约 50000、现货 49800，这 200 块的差价为什么不会被套利抹平？从这个问题出发，把资金费率的方向和周期、三个价格各管什么、以及强平清算穿仓这三个被混着用的词一次讲清。

Perpetual Protocol 五：InsuranceFund 和 Vault - 资金安全保障

Thu, 20 Jun 2024 16:32:23 GMT

v1 没有 Vault，保证金就存在 ClearingHouse 自己身上；InsuranceFund 也没有 compensate 函数，兜底走的是一个 beneficiary 门禁的 withdraw。这一篇跟着钱走一遍，看穿仓的窟窿到底由谁来填。

Perpetual Protocol 四：Exchange - 多市场管理的实现

Thu, 20 Jun 2024 16:16:56 GMT

v1 的仓库里根本没有 Exchange.sol。多市场靠的是每个函数的第一个参数 IAmm，市场注册表则长在 InsuranceFund 上。这一篇说清哪些风控参数按市场分开、哪些全站共用，以及 v2 那个真的叫 Exchange 的合约在干什么。

Perpetual Protocol 三：ClearingHouse - 永续合约交易的核心

Thu, 20 Jun 2024 16:08:28 GMT

v1 的仓位在链上只有六个字段，多空方向是 size 的符号而不是布尔值。跟着 ClearingHouse.sol 走一遍：开仓改了哪些状态、资金费用为什么不用逐个转账、保证金率跌到多少就能被别人清掉。

Perpetual Protocol 二：VAMM - 虚拟自动做市商的实现

Thu, 20 Jun 2024 15:47:46 GMT

vAMM 的池子里没有钱，成交价是从两个储备量算出来的。跟着 v1 的 Amm.sol 走一遍：恒定乘积怎么落成代码、买入把哪个储备量推高、以及资金费率怎么把偏离的价格拽回指数价。

Perpetual Protocol 一：概览

Thu, 20 Jun 2024 15:38:33 GMT

v1 的池子里一分钱都没有，Amm.sol 只存两个储备量数字，真钱躺在 ClearingHouse 上。这一篇把 v1 实际存在的三个合约摆清楚，顺带说明它和 v2 Curie 为什么不能混着讲。

React 18 完结：最佳实践与注意事项

Wed, 19 Jun 2024 19:30:36 GMT

升级到 React 18 真正会咬人的不是新 API，是旧代码在新 root 下行为变了 —— 自动批处理、StrictMode 把 effect 跑两遍、startTransition 只认同步回调。这一篇是前五篇那些机制落到改代码时的样子。

React 18 五：Selective Hydration

Wed, 19 Jun 2024 16:52:55 GMT

SSR 的页面看得见点不动，卡在 hydration。React 18 把切口交给 Suspense 边界：shell 先发，边界里的内容后补，用户点到哪儿就先给哪儿注水。

React 18 四：Suspense 与异步渲染

Wed, 19 Jun 2024 16:40:56 GMT

Suspense 的 API 只有一个 fallback 属性，难的是什么组件才真的能触发它。这一篇讲组件抛出 thenable 之后 React 走的那条路 —— 从 throwException 到 retryTimedOutBoundary，以及为什么重试是重新渲染而不是接着渲染。

React 18三：Concurrent Mode

Wed, 19 Jun 2024 16:23:08 GMT

React 18 里没有一个叫 Concurrent Mode 的开关可以打开。真正存在的是三样东西：5 毫秒的时间片、31 条车道的优先级阶梯，和一个完全不认识 React 的任务队列 —— 这一篇把一次更新从 setState 走到工作循环的路径排一遍。

React 18二：Fiber 架构

Wed, 19 Jun 2024 16:15:21 GMT

Fiber 节点就是一个普通对象，字段名能直接去 ReactInternalTypes.js 里对上。这一篇拆节点上的三个指针和双缓冲、beginWork 下行 completeWork 上行的那趟循环，以及为什么首次挂载其实停不下来。

React 18 一：架构与核心概念

Wed, 19 Jun 2024 15:16:07 GMT

React 18 的改动都绕着同一件事：让一次渲染在中途停得下来。Reconciler 算差异、Scheduler 决定什么时候算、Renderer 落到 DOM，Fiber 和 lane 是让它们停得下来、排得出先后的那两样东西。

基于MetaMask 理解钱包工作原理

Mon, 17 Jun 2024 18:15:48 GMT

钱包保管的是密钥，不是币。一句助记词按 BIP-32/39/44 派生出全部账户，vault 用 PBKDF2 加 AES-GCM 锁在本地，页面拿到的 window.ethereum 只是一根通往后台的管子 —— 以及 EIP-6963 为什么要换掉抢占 window.ethereum 的老做法。

Node.js，Ethers.js: 解析以太坊区块链数据

Mon, 17 Jun 2024 15:05:55 GMT

用 ethers v6 取区块、交易和事件日志。重点在两处容易写错的地方：parseLog 返回的 args 是数组不是键值对，以及判断重组要拿本地记的哈希去比，不是去问节点父块还在不在。

TheGraph 二 :subgraph 四大关键定义数据

Mon, 17 Jun 2024 12:05:18 GMT

拿 Uniswap V2 的 subgraph 当样本，把 manifest、数据源、mapping、schema 四份定义逐一拆开：有地址的进 dataSources、没地址的进 templates，事件签名为什么必须逐字对上，以及 schema 一处改动会同时动到数据库表、mapping 的输出和查询接口。

TheGraph 一: 架构解析

Mon, 17 Jun 2024 11:59:52 GMT

查一个交易对过去 30 天的成交量，以太坊节点答不上来。跟着 graph-node 的源码走一遍：区块怎么进库、触发器在哪一步才算出来、mapping 为什么跑在 wasm 里、写入为什么是按区块的一次事务，以及重组时这些数据怎么退回去。

Aave v3 学习

Sun, 16 Jun 2024 18:49:07 GMT

aToken 的余额自己会涨，因为 balanceOf 是乘出来的。跟着 aave-v3-core 读一遍：一个 uint256 怎么装下一个资产的全部风控参数、E-Mode 和隔离模式各自放松和收紧了什么、Portal 为什么能让 aToken 先于资产到账。

Compound v2 学习

Sun, 16 Jun 2024 17:34:15 GMT

存款之后 cToken 的余额一直不动，涨的是兑换率。跟着 CToken.sol 和 Comptroller.sol 走一遍：利息怎么靠一个 borrowIndex 往前推、利率对利用率为什么是折线而不是曲线、清算时那笔抵押品按什么公式算出来。

Uniswap v2 学习

Fri, 14 Jun 2024 18:24:25 GMT

swap 的四个参数里没有「你要付多少」。跟着 UniswapV2Pair.sol 走一遍：储备量为什么是 112 位、第一笔流动性为什么烧掉 1000 份、K 检查为什么排在转账后面，以及协议费怎么攒到下一次 mint 才收。

Dva 框架源码解析

Fri, 14 Jun 2024 03:50:49 GMT

npm 上装到的 dva 停在 2018 年，仓库里跑的是另一份代码。这篇按仓库 master 读 dva-core：model 在 start 前后是两个不同的函数，effects 的第二个参数是整个 redux-saga。

Nextjs 是如何实现 production ready 的 react

Thu, 13 Jun 2024 14:51:24 GMT

production ready 不是一个功能，是一批被预先做掉的决定。拆开 next@14 看三个能对上号的：预渲染方式在构建期固化成 __N_SSG / __N_SSP，framework 和 lib 是两组判据不同的 chunk，以及 App Router 之后这些还剩多少。

React：FiberNode 与 React 组件之间的对应关系

Thu, 13 Jun 2024 14:19:59 GMT

拿一个七行的 Counter 对着 React 18.2 的源码数：它在 Fiber 树里是六个节点，state 挂在 Hook 链表上，点一次按钮被打标记的既不是组件也不是

。

Redux、MobX、Recoil、Zustand 、Jotai 对比

Thu, 13 Jun 2024 13:22:11 GMT

这五个库里有一个已经归档，一个的官方文档写着「别再直接用这个包」，还有一个刚发的大版本把装饰器删干净了。先把版本对齐，再谈选型。

Sentry SDK 架构解析

Thu, 13 Jun 2024 06:29:19 GMT

一行 init 之后 Sentry 就开始收错误，靠的是改写 window.onerror。顺着这条线看 Scope 怎么给事件贴上下文、Integrations 为什么从类变成了函数，以及 v7 到 v10 之间被删掉的那几层。

Chakra UI 组件设计解读

Thu, 13 Jun 2024 05:59:22 GMT

Chakra UI v3 是一次彻底重写：Modal 改叫 Dialog 并拆成带命名空间的零件，spacing 换成 gap，colorScheme 换成 colorPalette。但它没有像传闻里那样丢掉 Emotion。

Typescript: Nest.js 中使用声明文件定义依赖注入的类型

Wed, 12 Jun 2024 04:21:37 GMT

Nest 靠 emitDecoratorMetadata 把构造函数的参数类型写进 design:paramtypes，运行时再读回来。接口在这一步会塌成 Object，这就是按接口注入必须另给 token 的全部原因。

TypeScript: MobX 中使用映射类型设计实现对象的响应式代理

Wed, 12 Jun 2024 04:10:33 GMT

Map 不是映射类型，它只是个泛型接口。MobX 里真正的映射类型是 makeObservable 的注解参数；而「响应式代理」里的 Proxy 只用在普通对象上，类实例走的是另一条路。

TypeScript: RxJS 中使用条件类型实现 Observable 的链式操作

Wed, 12 Jun 2024 04:01:57 GMT

pipe 的类型推导靠的是手写重载，不是条件类型，第 10 个操作符之后就退化成 Observable。RxJS 里真正的条件类型在别处 —— filter(Boolean) 能把 null 从类型里摘掉，靠的就是它。

Typescript: React 使用泛型定义组件 props 和 state

Wed, 12 Jun 2024 03:44:49 GMT

一个泛型列表组件为什么编译不过：类型参数的作用域只到 interface 边界为止。顺带说清 Component 的两个泛型参数其实来自 @types/react，以及 React 18 的类型把 children 从 FC 里拿掉之后该怎么写。

理解 Next.js 的 SSR , SSG 实现

Mon, 10 Jun 2024 13:36:06 GMT

拿两个页面跑一次 next build，SSG 和 SSR 的全部差别就摆在 .next 目录里：一个产出了 HTML 文件，另一个没有。顺着这个差别往下看渲染在哪一步分岔、__NEXT_DATA__ 装的是什么、hydrate 接的是哪一头。

Webpack 5 打包原理详解

Mon, 10 Jun 2024 11:05:42 GMT

打开 webpack 5 的产物看一眼：__webpack_require__ 就是一张 ID 到函数的表。顺带说清 Tree Shaking 到底是谁在删代码，以及 5 起不再自动 polyfill Node 核心模块之后该怎么办。

ES2015 到 ES2020 的变更:一次 JavaScript 语言的深层进化

Mon, 10 Jun 2024 07:53:38 GMT

把 ES2016 到 ES2020 的特性摆回各自的年份，再说清每个特性替掉了哪种老写法、以及它自带的坑。顺带纠正三个流传很广的说法：let 不是不提升、class 没换掉原型链、BigInt 修不了浮点精度。

Rollup 打包原理

Sun, 09 Jun 2024 16:35:16 GMT

同一份源码，rollup 的产物是几个平铺的函数，webpack 的产物自带一套模块系统。这个差别决定了打库该用哪个，也决定了 external、preserveModules 这些选项为什么存在。