The Vue instance will perform the following steps in sequence during the mounting process:
initialization
When creating a Vue instance, Vue performs a series of initialization operations. These include instantiating Vue, initializing the lifecycle, event system, reactive data, and more.
template compilation
After the initialization is complete, Vue compiles the template and converts it into a render function. A rendering function can be understood as a function that can be executed, which receives data and returns the generated virtual DOM. This process can be triggered by manually calling the $mount method, or it can be triggered automatically by configuring the el property.
mount
After the rendering function generates the virtual DOM, Vue will render it into a real DOM and mount it on the specified target element. During the mounting process, Vue will call various life cycle hook functions, including beforeCreate, created, beforeMount and mounted, etc. These hook functions can be used by developers to perform some initialization logic or perform some asynchronous operations.
renew
When the instance is successfully mounted, if the responsive data changes, Vue will automatically re-render. This is the core functionality of Vue's reactive system. When the data changes, Vue will automatically identify which components need to be re-rendered through the dependency tracking mechanism, and then execute the rendering function to generate a new virtual DOM and compare it with the old virtual DOM to find out the nodes that need to be updated , and finally render the updated node into the real DOM.