current position:Home>Vue - lifecycle of components

Vue - lifecycle of components

2021-08-23 23:57:06 HZM_ Endless

  • 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 !

copyright notice
author[HZM_ Endless],Please bring the original link to reprint, thank you.

Random recommended