What is the life cycle

The life cycle is the process of an object from birth to death, and the life cycle of a Vue is the process from initialization to destruction

What is a hook function

The lifecycle hook function of vUE is defined by the author in the design of vUE, during the special period from initialization to destruction of the vue. If defined, it will be executed, if not, it will not be executed. This in the lifecycle hook function will point to the instance of Vue by default.

Eight hook functions for the lifecycle

  • Initialization phase

    • beforeCreate
    • created
    • beforeMount
    • mounted

  • Update the stage

    • beforeUpdate
    • updated

  • Destruction of phase

    • beforeDestroy
    • destroyed

1. BeforeCreate (before creation)

Instances cannot access data or methods until they are fully created. Mounted () : / / Delete the loading effect after the page is loaded.

2. Created (created)

When the instance is created, data in data can be accessed and methods in methods can be called. Here, data attributes will be traversed, getter and setter will be added to each attribute to realize the responsiveness of data, but DOM has not been generated yet. Scenarios can make ajax requests

3. BeforeMount (Before mounting)

The DOM element $EL mounted by the instance has been initialized, and the template has been compiled in memory, but not rendered to the page

4. Mounted

The page is rendered, the initialization phase is complete, and you can access dom junction scene data interaction and send Ajax requests

5. BeforeUpdate (beforeUpdate)

Triggered when responsive data changes, when the data is updated but the content is not

6. Updated

Triggered when the response data changes, the data is updated but the page is not yet updated. Note: The response data cannot be modified, which will cause the modification operation to go into an infinite loop

7. BeforeDestroy (beforeDestroy)

Called before the instance is destroyed, while the instance is still accessible. This refers to the instance object scenario to clear timers and unbind global events

8. Destroyed (completed)

Called after the Vue instance is destroyed. Once called, everything in the Vue instance is unbound, all event listeners are removed, and all subinstances are destroyed.

There are also three lifecycle hook functions

  • Keep-alive has two hook functions (activated, deactivated) and Component has one hook function (errorCaptrued).

Keep-alive and Component are built-in components of Vue

keep-alive

For more information about the keep-alive cache component, please refer to the keep-alive cache component

component

The ability to display a component dynamically and to destroy the current component when switching to the nextCopy the code

errorCaptured

This hook function is called when a descendant component fails, and the hook receives three arguments: the error object, the component instance where the error occurred, and a string containing information about the source of the error. This hook can return false to prevent further propagation of the error.Copy the code
<component :is="aaa"></component>
Copy the code
export default {
	name: 'aaa'.errorCaptrued(err, errCom, info) {
		console.log('Child component error');
		console.log(err);
		console.log(errCom);
		console.log(info); }}Copy the code
Copy the code