Deep into the Vue life cycle

Deep into the Vue life cycle

This blog will explain the lifecycle of components from the following four common applications, and what each life cycle should do

1. The life cycle of a single component

2. The life cycle of parent-child components

3. Life cycle of sibling components

4. The life cycle of the macro mixin

Life cycle: Vue instances start with creating, initializing data, compiling templates, mounting dom→ rendering, updating → rendering, unloading, and so on, we call this the life cycle of Vue, which has corresponding event hooks at each stage.

1. Life Cycle hook function

The following diagram is the implementation of each phase of the Vue life cycle:

Attention:

1.created phase of the difference between AJAX requests and mounted requests: The former Page view does not appear, if the request information too much, the page long time in the white screen state

2.mounted does not promise that all subcomponents will also be mounted together. If you want to wait until the entire view is rendered

Complete, you can use the VM. $nextTick

vue2.0 call $destroy () does not remove the DOM node, the author does not recommend direct destroy this practice, if it is necessary to manually remove the DOM node in this life cycle hook

2. The life cycle of a single component

Now according to the actual code execution situation analysis:

<template>    <div>        
Exportdefault{data () {return{datavar:1}}, Beforecreate () { This. Compname = ' single 'Console.log ('--${ This. compname}--beforecreate ')}, created () {Console.log ('--${ This. compname}--created ')}, Beforemount () {Console.log ('--${ This. compname}--beforemount ')}, mounted () {Console.log ('--${ This. compname}--mounted ')}, BeforeUpdate () {Console.log ('--${ This. compname}--beforeUpdate ')}, updated () {Console.log ('--${ This. compname}--updated ')}, Beforedestroy () {Console.log ('--${ This. compname}--Beforedestroy ')}, destroyed () {Console.log ('--${ This. compname}--destroyed ')}, methods: {Handledestroy () { This. $destroy () }}}
When initializing a component, print:
When the value in data changes, print:
When the component is destroyed, print:
From the printed results can be seen:

 
 

  
  
 
   
When initializing a component, only beforecreate/created/beforemount/mounted four hook functions are executed
 
   
The beforeupdate/updated hook function is executed when the variable defined in data (the response variable) is changed
 
   
The beforedestory/destroyed hook function is executed when the switch component (the current component is not cached)
 
   
The Life hook function at initialization and destruction is executed only once, beforeupdate/updated can be executed multiple times
 
  
 
 
3. The life cycle of parent-child components
To use a single component as the underlying component (because props is not initialized in Beforecreate ()), you need to make the following changes:
props: {    compname: {        type:string,        default: ' Single '    }},beforecreate () {     //  this.compname = ' single '    //  console.log ('--${this.compname}-- Beforecreate ')    --data Uninitialized--beforecreate ')}
The parent component code is as follows:
<template>    <div class= "complex" >        
Const COMPONENT_NAME = ' complex 'Import Lifecyclesingle from'./lifecyclesingle 'Exportdefault{beforecreate () {Console.log ('--${component_name}--beforecreate ')}, created () {Console.log ('--${component_name}--created ')}, Beforemount () {Console.log ('--${component_name}--beforemount ')}, mounted () {Console.log ('--${component_name}--mounted ')}, BeforeUpdate () {Console.log ('--${component_name}--beforeUpdate ')}, updated () {Console.log ('--${component_name}--updated ')}, Beforedestroy () {Console.log ('--${component_name}--Beforedestroy ')}, destroyed () {Console.log ('--${component_name}--destroyed ')}, components: {Lifecyclesingle}}
When initializing a component, print:
When the value in the subcomponent data changes, print:
When the value in the parent component data changes, print:
When the props changes, print:
When the subassembly is destroyed, print:
When the parent component is destroyed, print:
From the printed results can be seen:
1. The parent component is mounted only when the subassembly has finished mounting
2. When the subassembly finishes mounting, the parent component will actively execute the beforeupdate/updated hook function (first time only)
3. Parent-child components are monitored separately in data changes, but the data in the update props is correlated (can be practiced)
4. When the parent component is destroyed, the parent component will not be destroyed until the child component is destroyed
4. Life cycle of sibling components
Based on the above, the complex components make the following changes
<template>    <div class= "complex" >        
When initializing a component, print:
When Child1 is updated and destroyed, print:
When Child2 is updated and destroyed, print:
When the parent component is destroyed, print
From the printed results can be seen:
1. Initialization of the component (before mounted) is performed separately and the mount is carried out from top to bottom
2. When there is no data association, updates and destruction between sibling components are unrelated
5. The life cycle of the macro mixin
Based on the above, add a mixin.js file with the following content:
Const COMPONENT_NAME = ' Lifecyclemixin 'Exportdefault{name:component_name, beforecreate () {Console.log ('--${component_name}--beforecreate ')}, created () {Console.log ('--${component_name}--created ')}, Beforemount () {Console.log ('--${component_name}--beforemount ')}, mounted () {Console.log ('--${component_name}--mounted ')}, BeforeUpdate () {Console.log ('--${component_name}--beforeUpdate ')}, updated () {Console.log ('--${component_name}--updated ')}, Beforedestroy () {Console.log ('--${component_name}--Beforedestroy ')}, destroyed () {Console.log ('--${component_name}--destroyed ')}}
Similarly, the complex components make the following changes:
Import Lifecyclemixin from './mixin 'default  {    mixins: [Lifecyclemixin],    //  ...}
When the component is initialized, print:
When the component is destroyed, print:
From the printed results can be seen:
The life cycle in Mixin is only associated with the life cycle of introducing the component, and the life cycle of the mixin is first implemented
Deep into the Vue life cycle