Vue component life cycle and hook function

Component life cycle

​ The process of a component (a component is a reusable Vue instance) from creation to destruction is the life cycle of the component, which is a period of time.

Component lifecycle hook function

(vue3 and vue2 lifecycle hook functions are slightly different, this article focuses on vue2)

​ The life cycle hook function provided by VUE will be automatically executed in order along with the life cycle of the component, which gives users the opportunity to add their own code at different stages. thisThe context of a lifecycle hook points to the Vue instance that invoked it.

​Life cycle diagram

Create phase hook function

1. beforeCreate()

   Called immediately after the component instance has been initialized.

   At this time, an empty vue instance object has just been initialized. There are only some default life cycle functions and default events on the object. props, data and methods have not been initialized and are in an unavailable state.

2. created()

   Called after a component instance has processed all state-related options.

   The props, methods, and data of the component have been created and can be used, but the template structure of the component has not been generated, and the DOM cannot be manipulated. It is the earliest node that can initiate an Ajax request.

3. beforeMount()

   Called before the component is mounted.

   The HTML structure compiled in memory is ready to be rendered to the browser. At this time, the browser does not have the DOM structure of the current component, and the DOM cannot be manipulated.

4. mounted()

   Called after the component has been mounted.

   The created HTML structure has been rendered to the browser, including the DOM structure of the current component, and the earliest node that can perform DOM operations.

Runtime hook function

1. beforeUpdate()

   Called just before the component is about to update its DOM tree due to a reactive state change.

   At this time, the data displayed on the page is still old, but the data in data is the latest, and the page has not been updated. Here, based on the latest data in data, a new virtual DOM tree will be re-rendered in memory. When the virtual DOM tree is updated, the latest virtual DOM will be rendered to the page. Complete the update from model => view.

2. updated()

   Called after a component has updated its DOM tree due to a reactive state change.

   At this point, the page and data data have been kept in sync and are up to date.

Destruction phase hook function

1. beforeDestroy()

   Called before the component is destroyed.

   At this time, data and all methods, as well as filters and instructions are still available, and there is no real destruction.

2. destroyed()

   Called after the component is destroyed.

   After the hook is called, all instructions corresponding to the Vue instance are unbound, all event listeners are removed, and all sub-instances are also destroyed.