- The process for creating a VUE instance is basically the same as creating a component
First do some initialization, mainly setting some private properties to the instance
Run the lifecycle hook function beforeCreate
Enter the injection process: handle attributes, computed, methods, data, provide, inject, and finally mount them into the instance using proxy mode
Run the lifecycle hook function created
Generate the render function: if configured, use the configured render; if not, use the runtime compiler to compile the template into Render
Run the life cycle hook function beforeMount
Create a Watcher and pass in a function called updateComponent that runs render and passes the resulting vNode to _update for execution.
During the execution of the Render function, all dependencies are collected and the updateComponent function is rerunced for future dependency changes
During the execution of _update function, the patch function is triggered. Since there is no old tree at present, the ELM attribute, namely the real DOM, is directly generated for every common node of the current virtual DOM tree.
If you encounter a vnode that creates a component, you will enter the component instantiation process, which is basically the same as the process of creating a vue instance, and will eventually mount the created componentInstance to the vnode’s componentInstance property for reuse.
Mounted runs the lifecycle hook function
- Heavy rendering?
After the data changes, all the Watcher dependent on the data will be run again. Only the Watcher corresponding to the updateComponent function is considered here
The Watcher is run in a nextTick, or microqueue, by the scheduler to prevent multiple dependent data changes from being executed multiple times
Run the life cycle hook function beforeUpdate
The updateComponent function is executed again
During the render function execution, the previous dependencies are removed, all dependencies are re-collected, and the updateComponent function is rerunced when the dependencies change in the future
When _update is executed, the patch function is triggered.
Compare the old and new trees.
Comparison of normal HTML nodes causes real nodes to be created, deleted, moved, and updated
The comparison of component nodes causes components to be created, deleted, moved, and updated
When a new component needs to be created, the instantiation process is entered
When an old component needs to be deleted, it calls the destroy method of the old component to remove the component, which triggers the life-cycle hook function beforeDestroy. This method then recursively calls the destroy method of the child component to remove the component, which triggers the life-cycle hook function beforeDestroy. The component is then removed recursively by calling the child component’s Destroy method, which triggers the lifecycle hook function beforeDestroy, which then recursively calls the child component’s Destroy method, which triggers the lifecycle hook function’s Destroyed
When a component property is updated, the updateComponent function equivalent to the component is re-triggered to enter the re-rendering process, as in this section.
Run the lifecycle hook function updated