欢迎大家加入一起共同学习进步。

最新消息和优秀文章我会第一时间推送的。

视频讲解 b站视频 https://www.bilibili.com/video/BV1fa4y1v7KT?p=6

参考资料一波

Vue3.0代码结构

Vue3.0资源全家桶

最近在学习Vue3.0源码，为了达到刻意练习的目的。决定给Vue3.0提点PR来验证自己的源码理解水平。经过两天的奋战添加了一个官方的todo test case。

以下我把大体的步骤总结一下。

首先需要将vue代码通过github的fork功能复制一份到自己的github

git clone git@github.com:su37josephxia/vue-next.git

# 设置国内镜像
yarn config set registry https://registry.npm.taobao.org
# --ignore-scripts  用于忽略chrome浏览器的下载
yarn install --ignore-scripts

# 强烈推荐大家全局安装
npm i jest -g 
jest --coverage

fork代码需要随时拉去官方最新的代码更新保持同步

这个只需要做一次

git remote add upstream https://github.com/vuejs/vue-next

这个需要随时做保持你的master分支永远是官方最新成果。

# 抓取源仓库修改 master分支
git fetch upstream master
# 切换分支
git checkout master
# 合并远程分支
git merge upstream/master

比如我想解决的这个问题是这个尤大遗留的这个测试TODO

git checkout -b comments

开发后的结果大概是这个样子

jest packages/compiler-core/__tests__/transforms/vIf.spec.ts --watc

开发完成后记得要跑全覆盖确认自己的代码对全局没有影响。

jest --coverage

这里面涉及到一个问题就是必须要按照官方需要的格式提交commit msg。不然那会被hooks进行自动检查拒绝你commit。 https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular

git commit -am 'test(compiler-core): add vif with comments test case'

git push --set-upstream origin comments

另外如果涉及多次提交会有一个要处理合并多个commit的问题。

TODO 近期更新

最后就可以等待着你胜利的好消息了

刻意练习才是提高的不二法门大家如果要阅读源码不妨给自己顶一个成功提出一次PR的小目标。


数据响应式	reactivity		reactivity ref effect
运行时	runtime-core	核心	inject 生命周期 watch directive component
	runtime-dom	Dom	class style
	runtime-test	测试仿真
编译器	compiler-core	核心	基本类型解析 AST
	compiler-dom	Dom	v-html v-text v-model v-clock
	compiler-sfc	单文件编译
	compiler-ssr	服务端渲染编译

工具方法	shared
vue	vue
模板解析器	template

覆盖率我们增加一个参数把覆盖率跑出来

npx jest --coverage

实际上跑覆盖率的时候是有错的我们先不去管他我们先解析一下这个报告怎么看，如果大家学过软件工程会知道一般从理论上讲覆盖率包括

语句覆盖节点覆盖路径覆盖条件组合覆盖但是一般来讲不同框架理解不一样在Jest这里大概是这样分解的