English / 日本語 / 中文

Mini Vue

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.

🧐 Why

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.

🛠️ Quickstart

# 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

🧩 How to Open Examples

To open the index.html file in the example/* directory, it is recommended to use Live Server.

💻 Tech Stack

• TypeScript
• Vitest
• Cypress
• Rollup

📌 Tasking

runtime-core module:

• Support component
• Support element
• Support proxy
• Access the object returned by setup within the render function
• Support $el api
• init props (including events)
• Support basic slots
• Support component emit
• setup function can access both props and context
• 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 return runner 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

Reference Links

• cuixiaorui/mini-vue
• HcySunYang/code-for-vue-3-book
• vuejs/core
• Vue.js Contributing Guide