The lifecycle of a Vue instance
1. What is the life cycle of Vue?
【1】Definition: refers to the whole process from the creation to the destruction of the vue instance in the page
[2], vue life cycle hook (vue life cycle function)
Features: Accompanied by automatic triggering during the life cycle of the vue instance, no manual triggering is required
2. The vue life cycle is roughly divided into three stages:
1. Initialization phase (4):
【1】beforeCreate ----------------------------------------- the first one triggered by the Vue initialization phase life cycle function
(When this function is executed, the Vue object only completes the injection of its own internal events and lifecycle functions)
【2】created --------------------------------------------- Vue The second lifecycle function triggered by the initialization phase
(When this function is executed, the Vue object already has its own internal events and life cycle functions, including custom data, methods, computed...)
[3] beforeMount ------------------------------------ the third life cycle triggered by Vue initialization phase function
(When this function is executed, el executes html is still an original template, and the data rendering work has not been completed yet)
【4】mounted ---------------------------------------------------------------------------------------------------------------------------- Four lifecycle functions
(When this function is executed, vue will create a virtual dom according to the template and perform data rendering, and finally replace the virtual dom with el)
------------------------------------------All Vue initialization is complete--- ---------------------------------------
2. Operation stage:
【5】beforeUpdate --------------------------------- This function will be triggered first when the data in the Vue instance changes (It can only be triggered when there is a data change)
(When this function is triggered, the data data in the vue instance has changed, but the page data has not been replaced)
【6】update ------------------------------------------ data data and page Data remains consistent
(At this point, the data in the data in the vue instance is exactly the same as the data in the page)
3. Destruction stage:
【7】beforeDestroy ------------------------------ The first life cycle function when destroying
(When this function is executed, the vue instance has not been destroyed, and all the features of vue exist at this time)
[8] destroyed ---------------------------------------- the second life cycle function when destroyed, The Vue instance has been completely destroyed when this function is executed
Call app. $ destroy (), after destruction, the two-way binding mechanism is gone
