初始化项目,引入jest
关于一些初始化jest需要安装的依赖: https://jestjs.io/docs/getting-started
实现reactive && effect && 依赖收集 && 依赖触发 TODO reactive一个基本数据类型时,怎样处理 reactive(1) TODO 依赖触发是在执行Reflect之后触发
完善effect, effect返回runner,可以传入scheduler
完善stop 写readonly
vscode 文件查找 批量替换 自动导入 实现effect stop
实现readOnly
实现isReactive isReadonly 利用Prox的get去判断
优化stop: 处理active.prop++的异常 实现多层对象的reactive readlonly 实现shallowReactive shallowReadonly
实现isProxy: 判断是不是 new Proxy的实例
完成了ref 思考的地方: ref传入一个对象,借助reactive实现,出发了两个get,这里是不是可以优化
完成isRef 和 unRef
完成proxyRefs 和 computed
computed 懒加载
component主流程 createApp(App).monut(container), 将app变成虚拟节点,然后path(遍历当前节点以及子节点),解析setup 持久化 render
完成componet流程 实现组件代理对象 => this.$el this.$data
将vnode渲染到页面上
完成代理对象 shapeFlags --〉 位运算
继续shapeFlags
实现注册事件 完成props
实现emit
实现slot ==》 将children放到组件内部 具名插槽: 使用键值对(插槽名: 插槽(需要渲染的)) { slot: h('div', {}, 'iam slat')} 作用域插槽: { slot: (props) => h('div', {}, props)}
type ==> 新增Fragment、Text类型,减少渲染dom的层级 renderSlots 只需要渲染children就好了
实现inject provide: 还是将变量绑定到组件实例上,利用原型链进行查找
实现自定义渲染,多平台渲染,提供接口
实现vnode更新 TODO 单测怎么跑不起来了 DOWN bable.config.js --> bable.config.json解决
实现props更新 看children的对比视频: text <--> array ?
实现children对比: Array < -- > text 、 text < -- > text
继续实现children对比: Array < -- > Array
继续实现children对比: Array < -- > Array、
最长递增子序列判断是否移动
实现组件更新 TODO 创建一个元素非常消耗性能吗?
实现异步更新 && nextTick : 主要是用微任务解决
实现template解析:{{message}} element 在实现一个函数的时候,先写出他的功能,然后在进行函数拆分