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.
1、beforeCreate
After instance initialization, data observer and event/watcher event configuration are called before.
2、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.
3、beforeMount
Called before the mount starts: the relevant render function is called for the first time.
4、mounted
el is replaced by the newly created vm.$el, and the hook is called after it is mounted on the instance.
5、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.
6、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.
7、beforeDestroy
Called before the instance is destroyed. At this step, the instance is still fully available.
8、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.