Skip to content

Latest commit

 

History

History
85 lines (63 loc) · 1.9 KB

README.md

File metadata and controls

85 lines (63 loc) · 1.9 KB

small-vue

手写 vue3 的核心逻辑

Why

vue3 核心源码,帮助开发者深入理解 vue,了解实现原理,源码库中有很多逻辑是用于处理边缘情况或兼容性,

不利于学习,而此项目就是把 vue3 源码中最核心的逻辑剥离出来,只留下了核心逻辑,并添加了注释方便阅读。

Tasking

reactivity

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

runtime-core

  • 支持 element 类型
  • 支持 Text 类型节点
  • 支持 Fragment 类型节点
  • h 函数
  • createVNode
  • vnode patch
  • diff 算法 双端比较
  • 支持 component
  • 支持 emit
  • 支持 provide/inject
  • 支持 getCurrentInstance
  • 支持 slots
  • 支持 nextTick
  • 支持 lifecycle
  • 支持 setup 函数

runtime-dom

  • 支持 custom renderer
  • 支持 patchProp
  • 支持 nodeOps
  • render 函数
  • createApp 函数

todo

compiler-core

Start

# install
pnpm install

# develop
pnpm dev

Test

执行 pnpm test 可以跑测试,如果你使用的是 vscode 建议安装 Jest runner 插件,Jest runner 可以帮助你在 vscode 中更方便的进行断点调试。

推荐使用 Jest Runner

Example

通过 server 的方式打开 packages/vue/example/* 下的 index.html 即可

推荐使用 Live Server