“Elder brother, I interview byte hung!”

Xiao Ming is sad and sad face: “MD, too curly! Shortly after Vue3 became a regular Vue3, the interviewer asked me about the principle of reactivity, proxy, Vue3 initialization process, compiler optimization, diff algorithm implementation…… The straight side is dead!”

“Interview ask principle normal ah, although Vue3 just turn positive, but already sent version for a long time ah, you can’t have no concern?”

Xiao Ming scratched his hair: “Attention is attention, but the source can not understand ah, that a renderer. Ts file on more than 2000 lines of code, how do you look at it?” .

“The source code is difficult, but if you want to face the big factory to get a high salary, the source code is around but ah. The interviewer by asking you the source code, all of a sudden you can know whether you are a love of learning love study of the students, and ah, that Vue3 project so big, processing engineering problems than we usually do not know how many times the project complex, look at people to solve the problem of thinking and way, is also very beneficial. “

“Brother, I know the importance of source code, the key is not to understand… You have no good Vue3 source code learning materials ah, quickly to the brother recommended ~”

“Don’t tell me, you caught up. There is a library on Github called Mini-Vue that can be used to learn Vue3 source code to minimize the difficulty.

“Mini-vue this library is the main feature of Vue3 source code of the most core logic stripped out, leaving only the core logic, and with detailed Chinese annotations and perfect output, can help you quickly understand the framework of the core operation process.”

The comments explain what the logical case is, very clearly (image taken from Mini-vue)

“Wow, there are Chinese annotations, it’s really sweet, after all, my English is really not that good haha!”

“Run the library example again, that helloWorld, and look at the console output. “

“What are these outputs? Wait, is it a process node that the program executes?”

“Yes, the process of application execution. Based on this output log, you can know what the process of instantiating a component is. It helps you to understand the process of execution of the entire framework and build a picture of it.”

“And if you look at the right side of the output, you can just click to jump to the code, and then you can have fun clicking on the breakpoint and thinking about the code implementation.”

“Fantastic, no wonder this library now has a 4.4K star.”

“Not only that, but also to show you a trick, the mini-Vue library code implementation is highly consistent with Vue3 source code implementation, such as the function of the name, you see this diff algorithm function is patchKeyedChildren bar”

When you are done with the simple version of the implementation and want to see how it is implemented in the source code, you just need to copy the function name and go to Vue3 and search for it.

“My grass, this must, I read a simple version, then go to see the source code, the difficulty is reduced a lot of ah!”

“Ha ha ha, yes, in fact, this is also in line with the learning model, if you start to see particularly complex, for you to learn the panic zone, many students are scared, a look at the code so large, logic so complex, directly give up. The mini-Vue library is the easy mode. Let me tell you what the idea of mini-Vue is based on and you can use it to implement your own Mini-React, Mini-Webpack, mini-rollup.”

“I can’t wait to sit down. I’m going to buy you a red Bull and teach me a lesson.”

I took a sip of the chilled Red Bull I had just taken out of the fridge, crossed my legs and said slowly, “You’re so eager to learn today, I’ll give you a few more words. For an engineering project as big as Vue3, it does a lot of things like give good error ↓ to users in a development environment.”

“Look at this. This is HMR ↓.”

“And these logic when you just look at the source code is not need to care about, but this part of the logic for you this novice is very difficult to distinguish, I give you a picture you feel feel.”

“Ha ha ha, elder brother you can be really soul painting hand ah, this nyma painting of so abstract, but I see understand. You mean the red squares are core logic and the purple circles are non-core, like error prompts and HMR.”

“Ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha. When we learn the source code, the first step is to understand the core logic, which is also called the happy path, which is equivalent to the trunk of a big tree. With that out of the way, we can see for ourselves that the logic in the code is nothing more than handling various edge cases. Have you noticed that this is actually a functional split of the Vue3 framework?”

“I’ve learned it again, I’ve felt it, break Vue3 down into smaller parts, and then the difficulty plummets. Once we understand the Happy path, it will be easier to understand the logic of the HMR or error message after learning this step.”

“Yeah, that’s the idea of splitting tasks, you can slice horizontally, you can slice vertically, you can slice however you want, if you’re thinking algorithmically…”

“The idea of divide and rule!” Xiaoming hurried to answer the noun he knew first, for fear that others would not know that he had learned the algorithm.

“Oh, yes, Xiao Ming, it seems that you are good at math and law. So this mini-Vue library for students who want to learn source code is very meaningful, now the author has completed the writing of three modules.”

“Oh? What are the three modules? I don’t know.”

“The three modules are Reactivity (responsive module), Run-time core (run-time module), and Compiler (compiler module), which are at the heart of Vue3. Now Vue3 source is used in the form of Monorepo, divided into a lot of modules, but for you this beginner, research through three modules is enough for your interview.”

“Uh-oh, I’m just going to get mini-Vue Clone and learn how to do it. Brother, then I learn mini-vue encounter problems can also trouble you ah, ha ha ha ~”

“You can just add the wechat account of the author of Mini-Vue: Cuixr1314. We call him Big Cui ge. If you have any questions, just ask him directly. If I have any questions, I will also ask him directly. He will answer your questions on mini-Vue.

“I’m going to add big Trigger hahaha ~ happy”