Elaborate on the vue hook function (life cycle function)

I. Overview

• The hook function is used to describe a certain process in the whole process of a component from introduction to exit, and the whole process is called life cycle.
• The hook function is divided into the process of component life cycle: mount phase => update phase => destroy phase.

2. The hook function corresponding to each stage

• Mounting stage: beforeCreate, created, beforeMounted, mounted
• Update phase: beforeUpdate, updated
• Destruction phase: beforeDestroy, destroyed

3. The usage characteristics of each hook function

• beforeCreate: This stage is mainly to complete some initialization work about the generation cycle and events in Vue. At this time, the data in data and methods are not initialized
• created: The instance is created, and the methods and data on data, computed, watch, and methods can be accessed. It is not mounted to the DOM, and the el attribute, el attribute, and ref attribute are empty arrays, which are often used in simple ajax requests and pages. initialization of
• beforeMount: Called before the mount starts, beforeMount will find the corresponding template and compile it into a render function
• mounted: The instance is mounted on the DOM. At this time, the DOM node can be obtained through the DOM API, and the $ref attribute can be accessed. It is often used to obtain VNode information and operations, and ajax requests
• beforeupdate: Called when the responsive data is updated, which occurs before the virtual DOM is patched, suitable for accessing the existing DOM before the update, such as manually removing the added event listener
• updated: Called after the virtual DOM is re-rendered and patched, the component DOM has been updated, and operations that depend on the DOM can be performed to avoid manipulating data in this hook function, which may fall into an infinite loop
• beforeDestroy: Called before the instance is destroyed. In this step, the instance is still fully available , and this can still obtain the instance, which is often used for operations such as destroying timers, unbinding global events, and destroying plug-in objects.
• destroyed: Destroyed, the data and all methods on the instance, as well as filters and instructions are in an unavailable state and have not been actually destroyed

4. The code execution sequence of the parent-child component hook function in the three stages

• Mount: father created> child created > child mounted> father mounted>
• Update: parent beforeUpdate > child beforeUpdated > child updated > parent updated
• Destroy: parent beforeDestroy > child beforeDestroy > child destroyed > parent destroyed

Five, Vue life cycle flow chart