“This is the 26th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”
A simple understanding of the Vue lifecycle
Vue life cycle
The life cycle is the entire process that a VUE component goes through from creation to destruction. It is divided into four major steps.
- Create created
- Mount mounted
- Update the updated
- Destroyed destroyed
Each big step is divided into two steps, beforexxx and after xxxed, such as beforeCreate, created. Properties and events of vUE components become available over different life cycles. Operations can be performed in the corresponding life cycle.
role
Before beforeCreate, which is new Vue, the event and life cycle will be initialized; Created and beforeCreate will mount Data and bind events. The page element is then mounted according to el, and if el is not set, the life cycle ends until manual mount. After the EL is mounted, render the page according to Templete /outerHTML(EL). The virtual DOM is created before beforeMount. Add vm.$el to vm.$el. Mounted Mounts the virtual DOM to the real page (the page is fully rendered). Trigger beforeUpdate and updated for some actions when data changes later; BeforeDestroy, manually undo listening events, timers, etc. Only the Dom node exists, everything else is automatically destroyed. This is the full life cycle of vUE as I understand it.
BeforeCreate: The hook function for creating Vue component instances. You can perform some initialization operations.
Between: initialize data and Method, dependency injection and validation
Created: A hook function created after a Vue component instance is created. The property is bound, but the $el property does not yet exist, the DOM is not generated, and the page is not displayed.
BeforeMount: Virtual DOM configuration is complete, templates are compiled, and HTML is generated based on component data and templates. The generated HTML has not been mounted to the page.
Between: Replace the DOM object pointed to by the EL attribute with the compiled HTML object.
Mounted: A hook function that is triggered after compiled HTML is mounted to a page. The DOM structure is mounted and the page is displayed.
BeforeUpdate: Called before data is updated and occurs before the virtual DOM is re-rendered and patched. You can further change the state in this hook without triggering additional rerendering.
Between: re-render the virtual DOM and update the real DOM by comparing the differences between vNodes through diff algorithm
Updated: Called after the virtual DOM is re-rendered and patched due to data changes. Updated when called, the page and data have been synchronized and are up to date for DOM-dependent operations.
In most cases, however, you should avoid changing the state during this period, as this can lead to an infinite update loop. This hook is not called during server-side rendering.
BeforeDestroy: Called before instance destruction. At this point, the destruction process has not actually been performed and the instance is still fully available.
Between: Unbind, destroy child components and event listeners.
Destroyed: Called after the instance is destroyed. When called, all event listeners are removed and all subinstances are destroyed.
This hook is not called during server-side rendering
| Properties and methods | $el | $data | method |
|---|---|---|---|
| beforeCreate | 0 | 0 | 0 |
| created | 0 | 1 | 1 |
| beforeMount | 1 | 1 | 1 |
| mounted | 1 | 1 | 1 |
| beforeDestroy | 1 | 1 | 1 |
| destroyed | 0 | 0 | 0 |
Reference article: doc.liangxinghua.com/vue-family/…