preface
A Vue instance has a full life cycle, which means from the start of creating, initializing data, compiling templates, hanging in the DOM, rendering, update-rendering, uninstalling, etc., we become the life cycle of a Vue instance. Hooks give you a chance to do some processing at a certain stage.
As we can see from the picture below
BeforeCreate (before creation)
After instance initialization, data observation and event configuration are called before the component’s option objects are created, el and data are not initialized, and therefore methods and data on Methods, data, computed, and so on cannot be accessed.
Created.
The instance is called after it has been created. In this step, the instance has completed the following configuration: data observation, property and method operation, watch/ Event callback, data initialization, el has not. However, the hang phase hasn’t started yet, and the $EL property is not currently visible, which is a common life cycle because you can call methods in Methods, change data in Data, and change the data that can be displayed on the page through vUE’s responsive binding, get computed properties in Computed, and so on. Preprocessing, usually we can for instance here there are some children’s shoes like sending ajax requests here, it is worth noting that this cycle is no way to to intercept the instantiation process, so if there are some data must obtain is allowed to enter the page, is not suitable for this method to send the request, It is recommended that this be done in the component routing hook beforeRouteEnter
beforeMount
The render function is called for the first time (virtual DOM). The instance has completed the following configuration: compile the template, generate HTML from the data and template, complete el and data initialization, note that the HTML is not hung on the page at this time.
Mounted (mounted)
Mounted is executed only once, when the HTML in the template is rendered to the HTML page.
BeforeUpdate (before data is updated)
Is called before data updates, before the virtual DOM is rerendered and patched, and further state changes can be made in this hook without triggering additional rerendering
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
Called before the instance is destroyed, the instance is still fully available,
- You can also use this to get the instance,
- This is usually where you do some resetting, such as clearing the timer and dom events that the component is listening for
They will be destroyed from the air.
Called after the instance is destroyed, all event listeners are removed, all child instances are destroyed, and the hook is not called during server-side rendering