Vue.js life cycle

What is the life cycle

The

Vue instance has a complete life cycle, that is, from the beginning to create, initialize the data, compile the template, mount the DOM, render → update → render, uninstall a series of processes, we call this the life cycle of Vue. In layman's terms, the process of creating a Vue instance from creation to destruction is the life cycle.

Throughout the life of Vue, it provides a series of events that allow us to register the JS method when the event is triggered, allowing us to control the overall situation with our own registered JS method, in which the this directly points to the instance of Vue.

It is particularly noteworthy that the difference between the created hook function and the mounted hook function

Each hook function is triggered at what time

Beforecreate

after the instance is initialized, the data observer and Event/watcher event configurations are called.

Created

The

instance is called after it has been created. In this step, the instance has completed the following configuration: Data Observer, properties and method operations, Watch/event event callbacks. However, the Mount phase has not yet started, $el properties are not currently visible.

Beforemount

called before the mount begins: The associated render function is called for the first time.

Mounted

El is newly created VM. $el replaced and mounted to the instance after the hook is called.

BeforeUpdate

called when data is updated, which occurs before the virtual DOM is re-rendered and patched. You can change the state further in this hook, which does not trigger the additional re-rendering process.

Updated

The hook is called after the virtual DOM is re-rendered and patched due to data changes.

When this hook is called, the component Dom has been updated, so you can now perform operations that depend on the DOM. In most cases, however, you should avoid changing the state during this period, as this may result in an infinite loop being updated.

The hook is not called during server-side rendering.

Beforedestroy

called before the instance is destroyed. In this step, the instance is still fully available.

Destroyed

called when the Vue instance is destroyed. Once invoked, everything indicated by the Vue instance will be unbound, all event listeners will be removed, and all child instances will be destroyed. The hook is not called during server-side rendering.

This digest from: https://www.cnblogs.com/superAnny/p/8590896.html

Vue.js life cycle