The life cycle is shown above
what is life cycle
A Vue instance has a complete life cycle, that is, a series of processes from starting to create, initializing data, compiling templates, mounting Dom, rendering → updating → rendering, unloading, etc. We call this the life cycle of Vue. In layman's terms, it is the process of Vue instance from creation to destruction, which is the life cycle.
In the entire life cycle of Vue, it provides a series of events that allow us to register js methods when events are triggered, allowing us to control the overall situation with our registered js methods, and this in these event response methods directly points to is an instance of vue.
On the picture again, the labeling of the life cycle diagram
Of particular note is the difference between the created hook function and the mounted hook function
When does each hook function fire?
beforeCreate
After instance initialization, data observer and event/watcher event configuration is called before.
created
Called after the instance has been created. At this step, the instance has completed the following configuration: data observer, operation of properties and methods, and callback of watch/event events. However, the mount phase has not yet started, and the $el property is currently not visible.
beforeMount
Called before the mount starts: the relevant render function is called for the first time.
mounted
el is replaced by the newly created vm.$el, and the hook is called after it is mounted on the instance.
beforeUpdate
Called when data is updated, before the virtual DOM is re-rendered and patched. You can further change the state in this hook without triggering an additional re-render process.
updated
This hook is called after virtual DOM rerenders and patches due to data changes.
When this hook is called, the component DOM has been updated, so you can now perform DOM-dependent operations. In most cases, however, you should avoid changing state during this time, as this could lead to an infinite loop of updates.
This hook is not called during server-side rendering.
beforeDestroy
Called before the instance is destroyed. At this step, the instance is still fully available.
destroyed
Called after the Vue instance is destroyed. After the call, everything indicated by the Vue instance will be unbound, all event listeners will be removed, and all child instances will be destroyed. This hook is not called during server-side rendering.