Source code reading: how to read it?
There are a lot of source code analysis articles on the market, as far as I see, the basic routine is to comb the process, talk about the function of each module, the whole article has more than half are directly linked source code. I can’t help but wonder, does the author really understand? Why do I still not understand anything after reading it?
In fact, a framework source code that has gone through countless iterations is not suitable for beginners to read directly, because there are too many details, too much noise, too many weeds. To truly understand the core logic of a framework, you have to peel it back to a pristine form. Just as the earliest version of jQuery was 600 + lines long, I believe the core functionality of Vue can be implemented in just a few hundred lines. So, read the sign of the source code is reduction, the thinner the code, the clearer the truth.
How to restore the prototype?
At the beginning, I envisioned the restoration process as deleting first and unpacking later. What error messages, parameter verification, non-core functions are all cut, 8,000 lines into 5,000 lines. Then, divide vue. js into util. Js, observer.js, watcher.
Ideally, I should be able to understand the source code, but after dissecting the surgery, I found that the logic inside is still complicated, cut constantly, chaos, grass snake gray lines, volumn thousands of miles, even if an earlier and shorter version, still quickly bogged down in endless details.
Ultimately, I came to the conclusion that rather than trying to restore a prototype from the source code, I should use the source code to implement a prototype from scratch.
Define the core
Version: 2.0.4
Only runtime versions are considered, not template compilation, not server rendering.
Core functions: responsive data binding, virtual DOM, DIff algorithm, patch method (for updating the real DOM)
If you’re not at all familiar with the basics, it’s recommended to get some background: see this article on reactive binding and this video on virtual DOM and diff algorithms. Of course, none of this is necessary.
The target
In fact, in vue-CLI-generated projects, everything in the <template> tag is compiled into the render function, which returns the entire virtual node tree. We will eventually implement a Vue to complete the above example.
What happens when new Vue()?
Our implementation will refer to the source code, but will greatly simplify the details. To understand the structure of the source code, the best place to start is to know what’s going on behind the scenes at the program’s starting point, New Vue().
A brief look at the source code execution flow:
=> Initialize the life cycle
=> Initialize the event system
Initialize state, and process props, data, computed…
= > start rendering _mount () = > and _render () returns vdom = > _update () = > __patch__ update real DOM ()
Refer to this article for more details, but we will only implement the core of it
Step 1: Render the virtual DOM tree to the real DOM
Each DOM node is a Node object, which contains a large number of properties and methods. The virtual DOM is actually a very lightweight version of the Node object.
The DOM tree we want to generate looks like this:
Refer to the official documentation for the properties of the data parameter
We then call each other’s createElm and createChildren methods to traverse the entire virtual node tree, generating a real DOM node tree, and finally replacing it with a mount point.
The complete code
Step 2: Modify the data, perform the DIff algorithm, and patch the changed part to the real DOM
The logic of diFF algorithm is complex and can be isolated and studied separately. Since our purpose is to understand the core logic of the framework, only the simplest case is considered in the code implementation.
The complete code
Step 3: The data is processed in a responsive manner. When the data changes, the update method is automatically executed
Each property in data is treated as an accessor property, and each property maintains its own DEP object in a closure to hold its dependencies. When a property is assigned a new value, the set method fires and all dependencies are notified to update.
The complete code
The gradual nature of Vue makes it extremely easy to get started, and I believe that the gradual presentation of the implementation of the framework logic will also make it easier to understand.