Detailed explanation of Vue.js life cycle when creating a Vue instance

Many things will happen in the life cycle of Vue.js when we create a vue instance:

1. Initialize first . Initialize events, life cycle related members, including h functions are all initialized at this stage.

2. Then trigger the hook function beforecreate .

3. After the beforecreate is executed, the injection & verification operation will be triggered . Inject the members of data, methods, and props into the vue instance.

4. Then the created hook function will be triggered , and the members of data, methods, and props can be accessed in the created hook function until the vue instance is created.

5. Then the template is compiled into the render function .
   First determine whether the el option is set in the options, if the el option is not set, call the $mOUn-T\left(\right)whichasquaremethod,$ Mount () converts into el template, the template compiler to render function.

6. Continue to determine whether the template template is set .
   If the template template is not set, use the outer html of the el element as the template template, and then compile the template template into the render function (the render function is used to return the virtual dom). If the template template is set, compile the template template into the render function.

7. The next step is to mount dom .
   First trigger the beforemount hook function, which is the hook function executed before mounting. The content of the new element cannot be obtained in this function. Mount the dom and render the new structure on the page.

8. Then trigger the mounted hook function , in this hook function, you can access the content of the new dom structure. After mounting, when modifying the members in data, first trigger the hook function **beforeupdate, and then compare the old and new virtual doms to re-render the differences to the browser. **In the beforeupdate hook function, if you directly access the content rendered in the browser, it is still the result of the last time

9. Trigger the updated hook function .
   If we want to get the latest data result, we should access it in the update hook function.

10. In the destruction phase, when the hook vm.$destroy() is called, the hook function beforeDestroy will be triggered.
    Perform cleanup work. Such as unbinding, destroying child components and event listeners.

11. Finally trigger the destroyed hook function

In the project, if we use single-file components, template compilation is done during packaging or construction, and template compilation is not processed at runtime. Vue always recommends us to compile templates in advance, so the performance will be better. Because we don't need to compile the template during runtime.