See the end of this article for the detailed Vue lifecycle implementation process

Phase 1 The creation phase

beforeCreateInitialize the event and lifecycle before execution

The Vue instance was just created in memory, the data objects and methods were not initialized.

  1. In this hook function, the data in data cannot be retrieved
  2. This function cannot manipulate the DOM

createdPerform data monitoring

The instance has been created in memory, the data and methods have been initialized, but the template has not been compiled, and the page still has no content. }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}

  • Send the request at created
  1. You can get the data in data
  2. You can’t manipulate the DOM

beforeMountPerform before

Find the corresponding template, compile it into the render function, and convert it into the virtual DOM. At this time, the template has been compiled and the data has not been mounted to the page. That is to say, at this stage you can see the double curly braces between the tags, and the data has not been rendered to the page.

Supplement:

render : h=>h(App)

After beforeMounte and before Mounted, there is the render function, which renders the template into a virtual DOM

  mountedMount to complete

The template is compiled, the virtual DOM is rendered into a real DOM tag, and the data is rendered to the page. At this point, the Vue instance has been created. If nothing else, the Vue instance does not operate. Mounted renders data retrieved from the back end. (when the page is initialized, if will be in the dom events usually mounted hook function, of course, you can also put in the create, if you want to use this. $nextTick (function () {}), to manipulate the dom in the callback function.)

–debugger– mount: turn the virtual DOM generated by the VUE instance into a real DOM, and put it in the page. // The compiled DOM replaces the original DOM; // You can get the final DOM element

Phase two instance phase

  beforeUpdateExecuted before updating the data

The beforeUpdate and updated hook functions are called when the data is updated; The above four are no longer run before updating data is executed

  updatedAfter updating the data

Data updates, virtual DOM updates, and then real DOM updates; Finally, the function is fired

Phase iii destruction period

  beforeDestroyBefore destruction

  1. Before destruction
  2. Clearing timer

  destroyedAfter the destruction of

  1. Destroy child components, destroy observers, event listeners
  2. The event for the element is still there, but changing the data will no longer cause the view to update
Hook function Triggered behavior What can be done at this stage
beforeCreadte The mount element $EL of the vue instance and the data object data are both undefined and uninitialized. Add loading events
created The data object for the vue instance is available, but the $EL object is not End Loading and request data to prepare for Mounted rendering
beforeMount Vue instance $EL and data are both initialized, but are still virtual DOM nodes. The specific data.filter has not been replaced.
mounted The vue instance is mounted and data.filter is successfully rendered Used with routing hooks
beforeUpdate Data is triggered before the update
updated Triggered when data is updated When the data is updated, do some processing (here can also use watch to observe)
beforeDestroy Triggered when the component is destroyed
destroyed When the component is destroyed, the vue instance unbinds the event listener and dom (no longer responds), but the DOM node remains Prompt for component destruction

Large picture warning ！！！！ Large picture warning ！！！！ Large picture warning ！！！！

Large picture warning ！！！！ Large picture warning ！！！！ Large picture warning ！！！！

Large picture warning ！！！！ Large picture warning ！！！！ Large picture warning ！！！！

Article link official website link