Most of the comments are in the code, this note is just for understanding the ideas
Code repository: mini-vue: a mini version of the vue3 source code, with particularly detailed comments and simple ts types to facilitate future review (gitee.com)
1. Understand the vue3 source code structure
The upper half mainly converts the template into a render function. The converted js code will contain many runtime functions, which is left to the second half.
2.The core process of reactivity
Start from the file below, ctrl+left click to view the process step by step. Comments are mostly in the code! This note is just for organizing ideas
~\reactivity\__tests__\reactive.spec.ts
When const xx = reactive({}), the following steps are actually performed:
Execute the createReactiveObject function . In this function, the core is to create a Proxy (the second parameter here is the collection of all current reactive data, and it will be returned directly). The most important thing in creating a Proxy is the processor, which is the baseHandelers in the figure below. .
In baseHandelers, the following operations are mainly performed:
- Dependency collection in get (i.e. effect side effects)
- Recurse the current object. If the attribute is an object, it must also become reactive data (that is, the entire process of the createReactiveObject function is executed for each child object, and all of them are Proxy objects.)
Then when the reactive data is changed, the setter (defined in baseHandelers) will be triggered.
In the trigger function, what is done is: get the dependency Map corresponding to the current target, then take out the dependency Set corresponding to the key from the Map, take out all the dependencies in the Set, and finally hand it over to triggerEffects to execute the dependencies ( implementation responsive)
3.runtime-core initialization core process
The summary is, if you encounter a component type, look for render, change it to element type, and finally render it one by one.
In main.js, there will be this code:
We open the createApp function
~\runtime-core\src\createApp.ts
First call the createVNode function, initialize the Vnode node , and then call the render function (not looking at createVNode here)
In the render function, the patch function is called . In the patch function, the Vnode's shapeFlag will be used to determine the type (HTML tag or vue component, the specific determination method will be discussed later), and then different functions will be called.
If it is a component type: divided into two types, here we only look at initialization
Then after the above processing, we return to patch, and then we look at the operation when mounting the element type. Also, only look at the initial mounting part for the time being.
If it is a simple child, it can be rendered directly (such as a text node). If it is complex, you need to call patch recursively.
After the recursion ends, the life cycle hook is triggered, beforeMount is triggered before mounting, then the real DOM is inserted, and then Mounted is triggered after the mounting is completed.
4.runtime-core updated core process
