It all starts with this picture on Vue’s official website, which cannot be ignored:

The following summarizes Vue’s lifecycle hook functions from four aspects. If there is any inappropriate place, welcome to correct.

Component lifecycle hook functions

1. Life cycle functions during creation (four)

New Vue() creates a Vue instance object.

Init Events & Lifecycle: an empty instance object has just been initialized. There are only a few default events and lifecycles on this object, and nothing else has been created.

BeforeCreate: This is the first life cycle function encountered. Represents before the instance is fully created. Execute before data observation and event configuration.

Note: When it executes, data, methods, computed, and watch are not initialized and cannot be accessed. (For example, when calling data and methods through this, remind that undefined and function are undefined.)

Created: This is the second lifecycle function encountered. After the instance is created, you can access data and methods on Data,computed, Watch, and Methods, but you cannot access EL because you have not mounted the DOM.

Note: If you want to call methods in methods or manipulate data in data, initially, you can only do this in Created.

Init Injections & Reactivity is the dependency injection dependency then Vue starts compiling the template, executing the instructions in the Vue code, and eventually generating a compiled final template string in memory, which is then rendered into the DOM in memory. At this point, the template is rendered in memory, not mounted to the actual page.

BeforeMount: This is the third lifecycle function encountered. When this function is executed, the template is already compiled in memory, but not yet mounted to the page. Now the page is old.

BeforeMount execution, the elements in the page are not actually replaced, just some template strings that were written before.

=== After it is mounted to the page, execute the next one.

Mounted: This is the fourth lifecycle function encountered. Indicates that the template in memory has actually been mounted to the page and the user can see the rendered page.

Note: Mounted is the last life-cycle function used during instance creation. When mounted is executed, it indicates that the instance has been fully created. If no other operations are performed on it, the instance is stored in memory.

Note that Mounted does not ensure that all child components are mounted together. If you want to wait until the entire view is rendered, use vm.$nextTick inside Mounted:Copy the code

Note If you want to operate nodes on a page, locate the node in Mounted at the earliest. Mounted indicates that the Vue instance is initialized. At this point, you are out of the creation phase. Enter the running phase.

2. Runtime lifecycle functions

The following two trigger optionally 0 or more times, depending on the data changes.

BeforeUpdate: Data must be updated.

Conclusion: When executed, the data displayed in the page is old, the data in data is the latest, and the page has not yet been synchronized with the latest data.

It then recalculates, recalculates a virtual DOM tree in memory and renders it to the page.

Updated: When executed, the page and data are in sync and up to date.

3. Life cycle functions during destruction:

BeforeDestroy: When executed, the instance is already moving from run to destroy.

At execution time, all data and methods, as well as filters, instructions, and so on, are available on the instance, and the actual destruction process has not yet been performed.

Destroyed: All data, methods, filters, etc. are not available when the component is completely destroyed.

2. Keep-alive life cycle function

Activated: activated when a component cached by keep-alive is activated.

Created hooks are not invoked repeatedly when vue-Router is used to cache component state. If a child component needs to do something each time it is loaded, the Activated hook can be used.

Deactivated: called when a component cached by keep-alive is disabled.

Third, errorCaptured

2.5.0 + added. Used to catch errors in child components. It is a way of handling errors in Vue and can be explored separately at some time.

4. Sequence of parent-child Component lifecycle execution (interview questions)

Loading the rendering process:

Parent beforeCreate-> Parent created-> parent beforeMount-> child beforeCreate-> child created-> child beforeMount-> Child Mounted -> parent Mounted

Child component update process

Parent beforeUpdate-> Child beforeUpdate-> Child updated-> Parent updated

Parent component update process

Father father beforeUpdate – > updated

Destruction of the process

Parent beforeDestroy-> Child beforeDestroy-> Child destroyed-> Parent destroyed

You can write a simple demo to test the print results.

In addition, there are a lot of things that can be expanded and vertical thinking, to be further sorted out.