mini-vue

手写vue3核心功能 了解学习vue3的原理

Feature

Reactive API

• reactive 函数 生成响应式数据 收集依赖并触发依赖更新
  
• effect 函数 执行指定函数 帮助reactive收集依赖
  
• effect 会返回 runner方法, 调用runner方法会重新执行fn，并且得到fn的执行结果
  
• stop方法清空effect依赖
  
• effect支持配置onStop回调函数
  
• readonly 函数创建一个只读的代理对象
  
• isProxy,isReactive,isReadonly 判断响应式数据类型
  
• reactive 和 readonly 嵌套object处理
  
• shallowReadonly 得到浅层的只读代理对象
  
• shallowReactive 得到浅层的响应式代理对象
  
• ref 功能
  
• isRef,unRef 工具函数
  
• computed 功能
  

Runtime Core

• 实现初始化 element 主流程
  
• 实现组件代理对象 ($el、this)
  
• 使用shapeFlag判断节点类型
  
• 处理元素的事件监听
  
• 实现组件的props逻辑
  
• 实现组件的emit逻辑
  
• 实现组件的slots逻辑
  
• 实现Fragment和Text节点渲染
  
• 实现getCurrentInstance方法
  
• 实现provide、inject方法
  
• 实现自定义渲染createRender方法
  
• 实现组件更新的基本流程
  
• 实现更新element的props