github.com/cuixiaorui/mini-vue @main

EN / CN

mini-vue

Implement the simplest vue3 model for in-depth study of vue3 source code

Usage

Bilibili Provides a video explaining how to use it

Can follow my Bilibili，Interpretation of live source code from time to time

Discuss

You can join the group to discuss the vue3 source code

with WeChat

Service

Provide one-to-one video teaching services, and take you to see the mini-vue source code hand in hand

Can add group communication

Why

When we need to learn vue3 in depth, we need to look at the source code to learn, but like this kind of industrial-level library, there are a lot of logic in the source code for processing edge cases or compatible processing logic, which is not conducive to our learning.

We should focus on the core logic, and the purpose of this library is to separate the core logic from the vue3 source code, leaving only the core logic for everyone to learn.

How

Based on the function points of vue3, split it out bit by bit

The code naming will remain consistent with the source code, so that you can find logic in the source code through naming.

Tasking

• [x] support component type
• [x] support element type
• [x] init props of component
• [x] context can get props and context in setup
• [x] support component emit
• [x] support proxy
• [x] can get the object returned by setup in the render function
• [x] Implementation of nextTick
• [x] support getCurrentInstance
• [x] support provide/inject
• [x] support basic slots
• [x] support text type

roadmap

• [ ] support english
• [ ] normalize console.log

build

yarn build

example

Open index.html under example/* use server

 Recommended Use Live Server

Initialization

flow chart

Key function call graph

The source code content can be quickly searched based on the function name

update

flow chart

Key function call graph

The source code content can be quickly searched based on the function name