Vue life cycle

The life cycle of a vue is shown in the figure below (very clear)

Secondly, the life cycle is the hook function. In vue It is divided into 8 stages: before/after creation, before/after loading, before/after updating, and before/after destroying.

Example

Result

beforeCreate (before creation), in the data Observation and initialization events have not yet started

created (after creation), complete data observation, calculation of attributes and methods, initialization events, $el attributes have not yet been displayed

beforeMount(load Before entering), it is called before the start of the mount, and the related render function is called for the first time. The example has completed the following configuration: compile the template, and generate html from the data and template in the data. Note that html has not been mounted on the page at this time.

mounted (after loading), called after el is replaced by the newly created vm.$el and mounted on the instance. The example has completed the following configuration: replace the DOM object pointed to by the el attribute with the html content compiled above. Finish rendering the html in the template to the html page. Ajax interaction is carried out in this process.

beforeUpdate (before update), called before the data update, occurs before the virtual DOM is re-rendered and patched. The state can be further changed in this hook without triggering an additional re-rendering process.

updated (after update), called after the virtual DOM is re-rendered and patched due to data changes. When called, the component DOM has been updated, so operations that depend on the DOM can be performed. In most cases, however, you should avoid changing the state during this period, as this may cause an endless loop of updates. This hook is not called during server-side rendering.

beforeDestroy (before destruction), called before the instance is destroyed. The instance is still fully available. Mainly used to destroy timers.

destroyed (after destruction), called after the instance is destroyed. After the call, all event listeners will be removed, and all child instances will be destroyed. This hook is not called during server-side rendering.

Popular explanation

1. beforecreate :
   Complete instance initialization and initialize non-responsive variables
   this points to the created instance;
   you can add here A loading event;
   The methods and data on data computed watch methods cannot be accessed
2. created
   Instance creation completed
   Complete the initialization of data (data props computed) and import dependencies.
   Can access the methods and data on data computed watch methods
   Do not mount DOM, can not access $el, $ref is an empty array
   You can end loading here, and do some initialization to realize function self-execution ,
   You can operate on data data, and you can make some requests. It is not easy to make too many requests and avoid the white screen for too long.
   If the DOM operation performed at this stage must be placed in the callback function of Vue.nextTick()
3. berofeMount
   With el, the template|/outerHTML
   can be found Corresponding template, and compiled into a render function
4. mounted
   Complete the creation of vm.$el, and two-way binding,
   Complete mounting DOM and rendering; can be mounted on the mounted hook Operate with dom
   that has DOM and completed two-way binding to access DOM nodes, $ref
   can initiate back-end requests here, get back data, and cooperate with routing hooks to do some things;
   DOM operation
5. beforeUpdate
   Before the data is updated
   You can access the existing DOM before the update, such as manually removing the added event listener;
6. updated :< br>Complete the re-rendering and patching of the virtual DOM;
   The component DOM has been updated;
   The dependent DOM operation can be performed.
7. activated:
   When using vue-router, you sometimes need to use to cache the component state. At this time, the created hook will not be called repeatedly.< br>If our sub-components need to perform certain operations every time they are loaded, they can be triggered by the activated hook
8. deactivated
   for keep-alive components used when the component is removed

< li>beforeDestroy:
Before executing app.$destroy()
you can make some delete prompts, such as: Are you sure to delete XX?
It can be used to destroy the timer, unbind the global time to destroy the plug-in object

9. destroyed:

   The current component has been deleted, destroy the event-monitoring component Event sub-instances are also destroyed
   At this time the component is gone, you can’t operate anything inside

The first page load will trigger beforeCreate, created, beforeMount, mounted, mounted Explain that the dom rendering is complete

Business application of Vue life cycle in real scenarios

created: Acquire asynchronous data and initialize data for Ajax request

mounted: get the dom node of the mounted element

nextTick: operate the dom immediately after updating the data for a single event

updated: update any data, if you want to do unified business logic processing< /p>

watch: monitor data changes and do the corresponding processing