Author: Rui Ge, Flower and Fruit Mountain

what

Hello, everyone, today to recommend a learning vuE3 source code of the best tool

Ruan yifeng teacher also recommended in the 144th issue of weekly

The contributor is of course me, and I am also the author of this library

Here I will introduce why this library was made at the beginning, and how this library should be eaten

mini-vue

Watch video version: Detailed guide to use

why

Vue3 as the most popular technology at present, in addition to learn how to use, we certainly want to go deep into the source code to see how these NB functions are realized, or to increase their core competitiveness to understand the principle, when the interview installed 13

But when we open up the source code for Vue3, you can see that there is so much code. Where to start reading the source code. Although the readability of vuE3 code is very high, it has a lot of code!!

For example, the baseCreateRenderer function in Renderer. ts has 1800 lines of code

It’s so bald

If you’re seeing this function for the first time, you’re going to be stunned. What do you think? Can I keep my hair? Probably by this time a lot of people have already been persuaded to quit.

Is that you? – -!

With such a large amount of code, we can take advantage of the idea of divide and conquer, to break small, and then break through

In fact, if we do a good analysis of the source code, you will find that there is a lot of logic that deals with edge cases or dev environments alone, which is not necessary to understand the core logic of VUe3

Take, for example, the red-boxed logic:

These are all actions that deal with the dev context, points that can be ignored while we understand the core logic

I’m not saying the logic isn’t important, but it can be learned later. Focus first

Could there be a library that only touches the core logic, removes the non-core logic, and makes the code more readable? Can be better understood?

In fact, there will be this type of library in the community, only the core logic of the library, so that students can understand the core logic of the library more quickly, such as a mini version

I didn’t find a mini in the community, so I just rolled up my sleeves

For the sake of the community

In fact, IN order to enable students to quickly understand the core logic of VUE3 based on Mini-Vue, I focused on two things in the code

Detailed notes

Detailed comments have been added to each specific code to facilitate faster understanding of the code’s behavior

Visualization of the running process

I’ve included console.log on each key path node, so you can just open the debug console to see the detailed running process, and when you want to debug code, you can quickly locate the specific code using console.log

In order to yourself

From my point of view, there’s a better way to verify that you’ve really mastered the code than putting it into an article

Is their own implementation of the function again, this for my own harvest is also huge. Because if you want to implement this feature, you have to understand it before you can write it.

how

Now, how about I tell you how to eat it

download

First you need to download the library to the portal of the local library

git clone https://github.com/cuixiaorui/mini-vue.git
Copy the code

README

In README, I have recorded in detail the functions that have been implemented so far

And the resulting brain map

You can put the whole core process together based on a brain map

The project structure

  • Example is where you put some demos
  • Lib is the file after build (the file the demo actually executes)
  • SRC is the core logic

Example of edible

You can start with the demo in Example and see how it works. Okay

Start by debugging the code based on the console.log output

Reading the code

Now that you understand the core flow, you can dive into specific code, such as:

  • See how Props did the diff
  • See how children deal with it

It is relatively easy to read because of detailed comments and only the core logic is retained.

And all functions in Mini-Vue are named in accordance with the source code, you can copy the function name and then go to vue3 search for comparison learning

Once you have mastered and understood the Mini-Vue, you can look at the source code for Vue3 and you will find that it is really not that difficult to read

The last

A more detailed mini-Vue tutorial is available in the video version

If this library can help you, I hope you can help me to click a star as open source encouragement (your encouragement is my motivation).

Later, I will update a little bit every day and gradually improve mini-Vue, hoping to help more students who love the front end

You are also welcome to submit your comments and suggestions to improve mini-VUE in Issues

Welcome to “Flower and Fruit Mountain front”, will output more interesting articles and projects