Implementing a minimal vue3 model based on TDD (Test-Driven Development) and TPP (Transformation Priority Premise) for learning Vue3 in depth.
This repo comes with notes to record what I was thinking and what I learned from studying mini-vue.
When we need to learn Vue3 in depth, we need to read the Vue3 source code.
But there is a lot of logic in the Vue3 source code, which is used to deal with edge cases or compatibility processing logic, and it makes Vue3 source code more difficult for us to read it.
We should focus on the core logic, and the purpose of this repo is to strip out the core logic in the Vue3 source code, leaving only the core logic.
# clone the project
git clone https://github.com/NansenHo/mini-vue.git
cd mini-vue
# install packages
pnpm install
# run unit tests
pnpm run test-unit
# run e2e tests
pnpm run test-e2e
pnpm run test-e2e:open
# build
pnpm run build
To open the index.html
file in the example/*
directory, it is recommended to use Live Server.
- TypeScript
- Vitest
- Cypress
- Rollup
runtime-core module:
- Support component
- Support element
- Support
proxy
- Access the object returned by
setup
within therender
function - Support
$el
api - init
props
(includingevents
) - Support basic
slots
- Support component
emit
-
setup
function can access bothprops
andcontext
- Support
provide
/inject
- Support
getCurrentInstance
- Support text node
- Update
props
- Implementation of
nextTick
- Support
watchEffect
reactivity module:
- Implementation of
reactive
- Implementation of
ref
-
track
dependencies collection -
trigger
dependencies triggering -
effect
returnrunner
function - Support
effect.scheduler
- Support
effect.stop
- Support
isReadonly
- Support
isReactive
- Support nested
reactive
- Support nested
readonly
- Support
isRef
- Support
unRef
- Support
proxyRefs
- Implementation of
computed
compiler-core module:
- parse interpolation
- parse element
- parse text