- Reactivity 部分
- Statements 92.23% (416/451)
- Branches 92.13% (82/89)
- Functions 82.6% (36/46)
- Lines 92.23% (416/451)
- Compiler 部分
- Statements 95.49% (572/599)
- Branches 994.31% (83/88)
- Functions 89.18% (33/37)
- Lines 95.49% (572/599)
- full Implementation 项目核心,就是模仿源码和@cuixiaorui 的 mini-vue 项目写的代码,测试基本抄源码,然后删改了一下
- intuitive Implementation 基本上是看 vue 设计和实现做的概念性的东西,主要为自己看懂
- notesForBlog 是过程中随手记的东西,非常零散,后面量大了会整理一下上博客
- 一个是感觉面试题里问源码的变多了。虽然大家都清楚性质上更多是筛选,但不得不说因为确实出题角度很刁钻,作为筛选也确实很有用。
- 另一个是自己偶然看过几篇零散的源码解析以后确实感觉也挺有长进,比如说
- mount 其实是直接变更挂载元素的 innerHTML
- 选项式 API 中 script 中声明的内容确实会自动绑定 publicThis,然后这个 publicThis 其实就是组件 instance,所以可以 this 取相关数据
- template 模板其实最后全部转为 h 函数进行渲染,然后这个所谓渲染函数,其实看代码或者说看思路还是内部调用 document.createElement
- 创建 vnode 的 h 函数某种程度上作用异常直接,基本就是用对象包一层返回
- 响应式系统的数据结构用的真的很奇妙
按霍春阳《Vue 设计与实现》的说法,vue 大致可以分为响应式,渲染器,编译器,组件系统和算额外功能的服务端渲染
- 响应式主要就是我们看到的数据和依赖联动更新
- 编译器就是让这些浏览器本身也不认识的 vue 代码转换成普通的 js 和 html 代码,或者说模板变成 render 函数
- 渲染器就是让这些代码变成实际或虚拟的 dom 让浏览器渲染出来
- 响应式有一个简单实现
- 实现了 reactive、ref、computed 基本功能,以及给 proxy 提供的各种 handler 配置
- effect 系列的功能,比如 track 和 trigger
- 用来收集依赖的 dep 数据结构,effect 之外的 effectScope,还有 deferComputed 放到后面慢慢实现
- 目前节选了源码的部分测试通过,后面尽可能把全部测试都过一遍
- 编译器目前在做,正好可以和前面 url 到 page 这个项目配合起来
- 渲染器也有一个创建挂载过程的简单实现,不过只是概念性的,具体推进还在后面
- 先乖乖把响应式写一遍再说,不然读源码脑子里没大概思路太痛苦了
- 接着写编译器,我的粗略感觉是运行时/组件系统内容比较庞杂,一时半会可能拿不出成品,所以先写编译器,正好和另一个项目打配合
- 最后写运行时