https://github.com/cycleccc/vue-design
Vue设计与实现 霍春阳版 每章 每节 JS、TS 源码
https://github.com/cycleccc/vue-design
Last synced: about 2 months ago
JSON representation
Vue设计与实现 霍春阳版 每章 每节 JS、TS 源码
- Host: GitHub
- URL: https://github.com/cycleccc/vue-design
- Owner: cycleccc
- Created: 2024-01-15T02:28:05.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2026-04-11T08:18:39.000Z (2 months ago)
- Last Synced: 2026-04-11T10:16:19.791Z (2 months ago)
- Language: HTML
- Homepage:
- Size: 231 KB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-design
《Vue.js 设计与实现》学习仓库，按章节拆分示例代码。
仓库里的示例主要分两类：
- `*.html`：用于直接在浏览器里验证章节思路
- `*.ts` + `*.js`：同一示例的 TypeScript 实现与编译产物
## 快速开始
```bash
pnpm install
```
## 常用命令
```bash
# 检查所有示例目录中的 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`