Vue - lifecycle of components

• Life cycle (Life Cycle) Refers to a component from establish => function => The destruction The whole stage of ; The emphasis is on a time period .
• Life cycle function : By Vue Built in functions provided by the framework , Will accompany the life cycle of this component Execute dynamically in order
• Be careful : Life cycle It's about time periods , Life cycle function strong Point in time .

Life cycle diagram

Create a stage

1. beforeCreate ( Component's props|data|methods Not yet created , Are unavailable
2. created ( Component's props| data | methods | Has created , All in You can use state , But the components Template structure has not been generated => send out Ajax The earliest time , Request data
3. beforeMount Will be compiled in memory HTML structure Render to Browser . In the browser Not yet Of the current component DOM structure
4. mounted The component is rendered into the browser for the first time | operation DOM The earliest time ( At this point, the memory has been HTML The structure is successfully rendered to the browser )

Operation phase

1. beforeUpdate ( Will be changed according to , The latest data , Re render the template structure of the component )
2. updated We have the latest data , It's done Components DOM Structural To render => Be able to operate to the latest DOM Elements

Destruction phase

1. beforeDestroy About to be destroyed This component , here Not destroyed , The component is still in Normal work The state of
2. destroyed The component has been destroyed , This component corresponds to... In the browser DOM structure Has been Remove... Completely !