Let’s start with a big classic picture

It contains eight lifecycle hooks, also known as lifecycle functions

BeforeCreate (before creation)

With this hook, the component’s option object is not created, and neither EL nor data is initialized, so data, methods, computed, and so on are not available. Usually used to render something before the component hangs.

Created (after creation)

At this time, data, methods, computed data have been created, data observation, attribute and method operation, and watch/ Event callback have all been completed, but the mount stage has not started yet, and el has not been completed. This is the most commonly used lifecycle hook that allows you to call methods in Methods, change data in data, and make changes that can be displayed on the page through vUE’s reactive binding, get computed attributes, and so on, and usually we can preprocess instances here and make Ajax requests here, There is no way to intercept the instantiation process in this cycle, so if there is some data that must be retrieved to allow access to the page, it is not appropriate to send a request in this method

BeforeMount (Before mounting)

The render function is called for the first time before the mount, the template is compiled, the data in data and the template will produce HTML, and the EL is done, but not mounted to the HTML page.

Mounted

Once the mount is complete, the HTML template will be rendered into HTML and you can do some Ajax. Mounted can be executed only once.

BeforeUpdate (beforeUpdate)

Update index data update, which occurs before the virtual DOM is rerendered and patched, in this hook you can change the state without redrawing.

Updated

Again due to data changes to the virtual DOM rendering and patching will only call and call, DOM components has been updated, so you can perform depends on the operation of the DOM, and in most cases, should be avoided during this time change state, because this may lead to update an infinite loop, the hook on the server side is not invoked during rendering

BeforeDestroy (Before destroying)

Called before the instance is destroyed, but the instance is still available.

You can also use this for reset operations, such as clearing timers and DOM listening events.

Destroyed (after destruction)

Called after instance destruction, after which all event listeners are removed, all subinstances are destroyed, and the hook is not called during server-side rendering