- 安装插件
- typescript:提供 ts 环境
- jest:测试模块
- babel-jest,@babel/preset-env,@babel/preset-typescipt:对测试代码进行转化
- 添加脚本命令
json test:"jest"
- reactivity:响应式 api 模块开发
- effect:收集依赖，当数据发生改变时，重新执行
- reactive:主要是 reactive，readonly，isReadonly···等 api 开发
- ref:主要为 ref 创建
- computed:计算属性
模块说明：
reactive主要使用proxy对数据进行代理，返回代理的对象，在get时收集依赖，set时触发依赖，当代理的属性为对象时递归进行代理，使用flag对reactive或者readonly进行标志，使用isReadonly来判断时，判断标志即可
readonly调用set函数时，就throw一个错误
ref使用
- 开发响应式模块(reactive)
- reactive:对数据进行代理，返回代理后的数据
- effect:对数据的副作用进行存储，存储在 weakMap 中
-
响应式对象
- reactive:通过 proxy 进行代理
- readonly:通过 proxy 进行代理
- shallowReadonly:通过 proxy 进行代理
- ref:通过 set/get 对属性进行挟持
- isRective:判断 flags 标识是否存在
- isReadonly:判断 flags 标识是否存在
- isProxy:判断 flags 标识是否存在
- isRef:判断 flags 标识是否存在
- unRef:通过 isRef 判断是否调用.value 属性
- proxyRefs:将被使用 ref 包裹的属性不用通过.value 获取，一般使用在 template 模板中
-
computed 计算属性
- 缓存:将 effect 也添加到 trace 中，只要监听到发送改变，就让 cache 缓存失效，重新获取
-
runtime-core 将 VNODE 转化为真实 DOM
- patch:判断为 element 还是为 component 决定是 createElement 还是递归 patch
- h:根据函数中的参数生成 VNODE 对象
- render:调用 h 函数，获取到组件对应的所有的 VNODE 对象
- createApp:一个函数返回一个对象
-
实现模块
- 支持组件类型
- 支持 element 类型
- 初始化 props
- setup 可获取 props 和 context
- 支持 component emit
- 支持 proxy
- 可以在 render 函数中获取 setup 返回的对象
- nextTick 的实现
- 支持 getCurrentInstance
- 支持 provide/inject
- 支持最基础的 slots
- 支持 Text 类型节点
- 支持 $el api
目标是用自己的 reactivity 支持现有的 demo 运行
- reactive 的实现
- ref 的实现
- readonly 的实现
- computed 的实现
- track 依赖收集
- trigger 触发依赖
- 支持 isReactive
- 支持嵌套 reactive
- 支持 toRaw
- 支持 effect.scheduler
- 支持 effect.stop
- 支持 isReadonly
- 支持 isProxy
- 支持 shallowReadonly
- 支持 proxyRefs