vue-design

《Vue.js 设计与实现》学习仓库，按章节拆分示例代码。

仓库里的示例主要分两类：

• *.html：用于直接在浏览器里验证章节思路
• *.ts + *.js：同一示例的 TypeScript 实现与编译产物

快速开始

pnpm install

常用命令

# 检查所有示例目录中的 TypeScript（不产出 JS）
pnpm typecheck

# 编译所有示例目录中的 TypeScript（会覆盖对应 .js）
pnpm build:ts

# 重新生成根目录示例索引页（index.html）
pnpm build:index

# 运行第 4-6 章核心响应式最小回归测试
pnpm test

目录说明

• 第4章响应系统的作用与实现：响应式系统基础、effect、watch、computed
• 第5章非原始值的响应式方案：Object/Array/Set/Map 的代理与触发策略
• 第6章原始值的响应式方案：ref、响应丢失、自动脱 ref
• 第7章渲染器的设计：渲染器与响应系统结合、自定义渲染器
• 第8章挂载与更新：挂载、卸载、事件、子节点更新、Fragment
• 第9章简单Diff算法：简单 Diff
• 第10章双端Diff算法：双端 Diff
• 第11章快速Diff算法：快速 Diff 与 LIS
• 第12章组件的实现：组件、props、setup、插槽、生命周期
• 第13章异步组件与函数式组件：异步组件与函数式组件
• 第14章内建组件和模块：KeepAlive、Teleport、Transition
• 第15章编译器核心技术概览：parse、AST 构造、转换与代码生成

工程约定

• 每个示例目录保留一个最小 tsconfig.json，统一继承根目录共享配置。
• 示例目录命名统一使用无空格格式（便于跨平台脚本处理）。
• 根目录共享配置：
  • tsconfig.base.json：通用编译选项
  • tsconfig.vue-paths.json：额外包含 @vue/* 路径映射
• 批量校验脚本：scripts/typecheck-all.mjs
• 示例索引生成脚本：scripts/generate-index.mjs
• 回归测试：tests/reactivity-regression.test.ts