After reading the source code before, I found: "Just think about it the other way around."
What the vue framework mainly does is to use a specific DOM writing method to convert tags into js objects (virtual DOM), then insert the virtual DOM into HTML and render it into a page.
The vue source code is mainly implemented around the above "theme". (top down)
- The first is the architecture, how to arrange and decompose the project, and split the functions of different functions into different categories of directories with low coupling.
- Project initialization configuration and logic implementation. (Keep in mind the result, all operations are to render VNode to HTML)
- The penultimate step is the preparation of the previous step to get the "final" result, VNode data,
- The third to last step, the previous step to obtain VNode data, what is it and what is done
- ……
The more you look at it, the clearer it becomes. If you don’t understand something, you can skip it first, grasp the main points, go through the process, and go back to fill in the details.
- Choose the right tool to get your code running first
- Clarify the code organization relationship and purpose
- Make good use of unit tests
- Weigh the pros and cons (jump when you need to, it is easy to end up in a dead end if you are confused for a long time, you can mark it and look back)
- Use search engines (can be combined with source code analysis data on the Internet to understand)
- Interact more with yourself (read with questions)