mini-vue

Hi, there! 👋

I'm Alex aka zx 👨‍💻

As you can see, I'm a frontend developer.

这是我关于崔大的 mini-vue 的个人实现

这个是配套的笔记 搭配起来食用更佳哟

欢迎 star 哦

目前已实现模块：

reactivity

• reactive
• [x] happy path
• [x] isReactive
• [x] reactive 嵌套转换
• effect
• [x] happy path
• [x] return runner
• [x] scheduler
• [x] stop & onStop
• readonly
• [x] happy path
• [x] isReadonly
• [x] readonly 嵌套转换
• [x] shallowReadonly
• [x] isProxy
• [x] shallowReactive
• ref
• [x] happy path
• [x] ref 应该是响应式的
• [x] ref 的值如果是一个对象那么就是 reactive
• [x] isRef
• [x] unRef
• [x] proxyRefs
• [x] toRaw
• [x] computed

runtime-core

• 组件
• [x] 组件的初始化流程
• [x] 组件代理对象/render 中可以访问 setup 返回/\$el
• [x] shapeFlags 对组件进行判断
• [x] 注册事件
• [x] 注册 Props
• [x] emit
• [x] slots
• [x] Fragment 和 TextNode
• [x] getCurrentInstance
• [x] provide/inject
• [x] customRenderer
• 打包
• [x] 配置 rollup
• 更新逻辑
• [x] 初始化更新 element 逻辑
• [x] 更新 props
• [x] 更新 children
  • [x] array -> text
  • [x] text -> text
  • [x] text -> array
  • [x] array -> array
  • [x] 首尾对比
  • [x] 中间对比（一）删除多的旧节点
  • [x] 中间对比（二）移动和创建少的节点
• [x] 更新 component
• [x] 异步更新视图和 nextTick API

compiler-core

• [x] compiler 模块概述
• [x] parse 插值表达式
• [x] parse element
• [x] parse text
• [x] parse 联合三种类型
• [x] 从有限状态机的角度看 parse 模块原理
• [x] transform 模块
• [x] codegen 生成 text
• [x] codegen 生成插值
• [x] codegen 生成 element
• [x] template 编译为 render

类型

• [x] runtime-core
• [ ] reactivity
• [ ] compiler-core