Vue life cycle

The life cycle

• BeforeCreate (before creation) : During the data capture phase, the initialization event has not yet started.

• Created: Data hostage-managed, property and method operations, initialization events, and $EL properties are not yet shown.

• BeforeMounted: Called before the mount begins, the associated render function is called for the first time. The instance completes the template compilation, generating HTML configuration from the data and template in data. The HTML has not been mounted to the page yet.

• Mounted: After el is replaced by a newly created vm.$el and mounted to the instance. The instance completes rendering the HTML from the template to the page by replacing the EL attribute pointing to the DOM object with the HTML content compiled above.

• BeforeUpdate: Called before data is updated and occurs before the virtual DOM is re-rendered and patched. State can be changed further in this life cycle without triggering a repeat rendering process.

• Updated: Called after the virtual DOM is rerendered and patched due to data changes. When called, the component DOM is already updated, so DOM-dependent operations can be performed. In most cases, however, you should avoid changing the state during this period, as this can lead to an infinite loop of updates. This life cycle is not invoked during server-side rendering.

• BeforeDestory: Called before the instance is destroyed, the instance is still available.

• Destoryed: called after the instance is destroyed, after which all event listeners are removed and all subinstances are destroyed. This life cycle is not invoked during server-side rendering.