This is the 26th day of my participation in the August More Text Challenge

What is the lifecycle of VUE?

Vue each component is independent, each component has its own life cycle, created from a component, data initialization, mount, update, destroy, this is a component’s so-called life cycle.

What is the role of the life cycle?

There are multiple event hooks in the VUE lifecycle, making it easier to form good logic when controlling the entire VUE instance.

In which cycle is DOM rendering completed?

DOM rendering is done in Mounted

How many stages are there in the Vue life cycle?

1. Create

  • BeforeCreate: For this phase, the instance is initialized, but the data observation and event mechanism is not yet formed, and the DOM node cannot be retrieved (no data, no EL).

    Usage scenario: Since neither data nor methods are available, they are usually used outside of the instance

  • Created: An instance is created, but the DOM node cannot be retrieved (data, no EL)

    Use scenario: called before the template is rendered into HTML, data and methods can be obtained, some attribute values can be initialized, and then rendered into a view, asynchronous operations can be placed here.

2. Load the

  • BeforeMount: a transition phase where no specific DOM node is retrieved, but the root node to which vue is mounted has been created (data, EL)

  • Mounted: Data and DOM are rendered

    Use scenario: the template is called after rendering to HTML, usually after initializing the page and then doing some operations on the data and DOM. Methods that need to manipulate the DOM can be placed here

Update 3.

  • beforeUpdate: Executes when a data update is detected, but before a DOM update
  • updated: Executed after the update is complete

Usage scenario: need to do unified processing for data update; If you need to differentiate between different data update operations, use $nextTick

4. The destruction of

  • beforeDestroy: When a Vue instance is to be destroyed, it is executed before destruction
  • destroyed: Executed when the Vue instance is destroyed

Which hooks will be triggered the first time the page loads?

The first page load triggered when beforeCreate, created, beforeMount, mounted.

Vue parent component and child component lifecycle hook execution order?

BeforeCreate, Created, beforeMount, and Mounted are triggered the first time a page is loaded.

Rendering process:

Mouted is mounted after the parent component. Mouted is mounted after the child components. Mouted is mounted after the parent component

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

Sub-component update process:

Affects the parent component: Parent beforeUpdate-> child beforeUpdate-> Child updated -> Parent updTED

Does not affect parent component: child beforeUpdate -> Child updated

Parent component update process:

Affects child components: Parent beforeUpdate-> child beforeUpdate-> Child updated -> Parent updTED

Does not affect child components: parent beforeUpdate -> Parent updated

Destruction process:

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

Important: The parent waits for the child to complete before executing its own completed hook.