This is the third day of my participation in the August Text Challenge.More challenges in August
- What is the life cycle
- What are the life cycles
- Overall process
- Difference between Data request Created and Methods
What is the life cycle
The concept of Life Cycle is widely used, especially in politics, economy, environment, technology, society and many other fields. In Vue, the entire process from Cradle to Grave creation to destruction is the life cycle, which refers to the process from creation, initialization of data, compilation of templates, Dom mounting, rendering, updating, rendering, unmounting, etc
We can think of components as an assembly line in a factory, where each worker (life cycle) stands at his or her position and begins to work as the task comes to him or her
PS: Hooks automatically bind this context to the instance during the Vue lifecycle, so you can access data and perform operations on properties and methods
This means that you cannot define a lifecycle method using arrow functions (e.g. Created: () => this.fetchtodos ())
What are the life cycles
The Vue life cycle can be divided into eight phases: before and after creation, before and after loading, before and after update, before and after destruction, and the life cycle of some special scenarios
| The life cycle | describe |
|---|---|
| beforeCreate | Before the component instance is created |
| created | The component instance has been fully created |
| beforeMount | Components before mounting |
| mounted | After the component is mounted to the instance |
| beforeUpdate | Component data changes before updating |
| updated | Data After data update |
| beforeDestroy | Before the component instance is destroyed |
| destroyed | After the component instance is destroyed |
| activated | When the keep-alive cache component is activated |
| deactivated | Called when a component of the keep-alive cache is disabled |
| errorCaptured | Called when an error from a descendant component is caught |
| — |
Overall lifecycle process
A concrete analysis
beforeCreate -> created
- Initialize the VUE instance for data observation
created
- Complete data observation, operation of attributes and methods, and configuration of watch and Event event callback
- Methods in Methods can be invoked to access and modify data data to trigger responsive DOM rendering. Data can be computed using computed and Watch
- At this point, vm.$el is not created
created -> beforeMount
- Determine if there is an el option, if not, stop compiling until vm.$mount(el) is called
- Priority: render > template > outerHTML
- Vm. el gets the DOM mount
beforeMount
- At this stage, vm.el is available
- At this stage, vm.el completes DOM initialization, but is not mounted on the EL option
beforeMount -> mounted
- At this stage vm.el completes the mount and the DOM generated by vm.$el replaces the DOM corresponding to the EL option
mounted
- Vm. el has finished mounting and rendering the DOM. Now print vm.$el and notice that the previous mount point and contents have been replaced with the new DOM
beforeUpdate
- The updated data must be rendered on the template (el, template, render).
- The View layer has not been updated yet
- If you modify the data again in beforeUpdate, the update method is not triggered again
updated
-
Complete the view layer update
-
Update method beforeUpdate, updated is triggered again if data is updated again.
-
Called before the instance is destroyed, when instance properties and methods are still accessible
destroyed
- Completely destroy an instance. You can clean up its connections to other instances and unbind all its instructions and event listeners
- You don’t clear the DOM, you just destroy the instance
Application Scenario Analysis
| The life cycle | describe |
|---|---|
| beforeCreate | The component instance is not created at execution time and is usually used to perform some initialization tasks during plug-in development |
| created | After the component is initialized, various data can be used, often for asynchronous data acquisition |
| beforeMount | No render, update, dom not created |
| mounted | After initialization, the DOM is created and can be used to retrieve access data and DOM elements |
| beforeUpdate | Before the update, it can be used to obtain the status before the update |
| updated | After the update, all states are up to date |
| beforeDestroy | Before destruction, can be used for some timer or subscription cancellation |
| destroyed | Component destroyed. Same as above |
Difference between Created and Mouted
Created is called as soon as the component instance is created, and the page DOM node is not generated
Mounted is executed immediately after the page DOM node has been rendered
Created is created earlier than Mounted
They have something in common: you can get the properties and methods of the instance object
Mounted requests may cause the page to flash (the DOM structure of the page has already been generated). If the request is completed before the page is loaded, this will not happen
Created: Called before a template is rendered to HTML, usually by initializing some property values and then rendering to a view. Mounted: Specifies whether to perform operations on AN HTML DOM node after the template is initialized.
Vue gets data in which periodic function?
- Create (or beforeRouter) is created (or Mounted) depending on the situation.
- When created, the HTML in the view is not rendered, so if you directly manipulate the HTML DOM node, you will not find the relevant element
- In Mounted, you can manipulate the DOM node directly because the HTML has already been rendered.
Which hooks are triggered the first time the page loads?
BeforeCreate, Created, beforeMount, and Mounted are triggered for the first time