small-vue 说明文档

环境搭建

jest 单元测试环境搭建

1. 安装插件
   • typescript:提供 ts 环境
   • jest:测试模块
   • babel-jest,@babel/preset-env,@babel/preset-typescipt:对测试代码进行转化
2. 添加脚本命令
   • json test:"jest"

目录介绍

1. reactivity:响应式 api 模块开发
   • effect:收集依赖，当数据发生改变时，重新执行
   • reactive:主要是 reactive，readonly，isReadonly···等 api 开发
   • ref:主要为 ref 创建
   • computed:计算属性

模块说明：
reactive主要使用proxy对数据进行代理，返回代理的对象，在get时收集依赖，set时触发依赖，当代理的属性为对象时递归进行代理，使用flag对reactive或者readonly进行标志，使用isReadonly来判断时，判断标志即可

readonly调用set函数时，就throw一个错误

ref使用

开发

1. 开发响应式模块(reactive)
   • reactive:对数据进行代理，返回代理后的数据
   • effect:对数据的副作用进行存储，存储在 weakMap 中

api

1. 响应式对象

   • reactive:通过 proxy 进行代理
   • readonly:通过 proxy 进行代理
   • shallowReadonly:通过 proxy 进行代理
   • ref:通过 set/get 对属性进行挟持
   • isRective:判断 flags 标识是否存在
   • isReadonly:判断 flags 标识是否存在
   • isProxy:判断 flags 标识是否存在
   • isRef:判断 flags 标识是否存在
   • unRef:通过 isRef 判断是否调用.value 属性
   • proxyRefs:将被使用 ref 包裹的属性不用通过.value 获取，一般使用在 template 模板中

2. computed 计算属性

   • 缓存:将 effect 也添加到 trace 中，只要监听到发送改变，就让 cache 缓存失效，重新获取

3. runtime-core 将 VNODE 转化为真实 DOM

   • patch:判断为 element 还是为 component 决定是 createElement 还是递归 patch
   • h:根据函数中的参数生成 VNODE 对象
   • render:调用 h 函数，获取到组件对应的所有的 VNODE 对象
   • createApp:一个函数返回一个对象

4. 实现模块

   runtime-core

   • 支持组件类型
   • 支持 element 类型
   • 初始化 props
   • setup 可获取 props 和 context
   • 支持 component emit
   • 支持 proxy
   • 可以在 render 函数中获取 setup 返回的对象
   • nextTick 的实现
   • 支持 getCurrentInstance
   • 支持 provide/inject
   • 支持最基础的 slots
   • 支持 Text 类型节点
   • 支持 $el api

   reactivity

   目标是用自己的 reactivity 支持现有的 demo 运行

   • reactive 的实现
   • ref 的实现
   • readonly 的实现
   • computed 的实现
   • track 依赖收集
   • trigger 触发依赖
   • 支持 isReactive
   • 支持嵌套 reactive
   • 支持 toRaw
   • 支持 effect.scheduler
   • 支持 effect.stop
   • 支持 isReadonly
   • 支持 isProxy
   • 支持 shallowReadonly
   • 支持 proxyRefs