Angular and the Vue lifecycle

Vue life cycle

• The beforeCreate Vue instance has not been created
• Created Vue instance created, property methods are created; For API requests, initialize parameters
• BeforeMount Virtual nodes have been composited, waiting for DOM rendering
• Mounted API request. In this case, all DOM nodes have been rendered and the real DOM node can be obtained
• beforeUpdate
  
  
• Updated Attribute Changed
• beforeDestroy
  
  
• destroyed
  
  

Angular lifecycle

• Constructor starts with some parameters
• NgOnInit Some API requests
• NgOnChanges (change: SimpleChanges) The value of the input property has changed
• ngDoCheck
  
  
• NgAfterContentInit Is called once the ContentChild and ContentChildren are initialized
• ngAfterContentChecked
  
  
• NgAfterViewInit ViewChild and ViewChildren are called once after they are initialized
• NgAfterViewChecked detects and reacts to changes that Angular is unable or unwilling to detect itself. This is called immediately after ngOnChanges() and ngOnInit() during each change detection cycle. In some cases, we need real DOM nodes, which can be determined by ngDoCheck
• NgOnDestroy Removes the subscription and destroys the event

What’s the difference between Vue and Angular life cycle?

Lifecircle.vue

<template>
   <div class='box'>
       <h1>Lifecycle</h1>
       <lifecycle-child :username="username"></lifecycle-child>
       <button @click="changeName">changeName</button>
    </div>
</template>

<script>
import LifecycleChild from './components/LifecycleChild';
export default {
   components: {
       'lifecycle-child': LifecycleChild
   },
   data() {
       return {
           username: 'Kobe'}; }, methods: {changeName() {
           this.username = 'sunji'; }},beforeCreate() {
       console.log('------------beforeCreate------------');
       console.log('Data:' in vue, this.username);
       console.log('DOM node in vue:', document.querySelector('.box'));
   },
   created() {
       console.log('------------created------------');
       console.log('Data:' in vue, this.username);
       console.log('DOM node in vue:', document.querySelector('.box'));
   },
   beforeMount() {
       console.log('------------beforeMount------------');
       console.log('Data:' in vue, this.username);
       console.log('DOM node in vue:', document.querySelector('.box'));
   },
   mounted() {
       console.log('------------mounted------------');
       console.log('Data:' in vue, this.username);
       console.log('DOM node in vue:', document.querySelector('.box'));
   },
   
   beforeUpdate() {
       console.log('------------beforeUpdate------------');
       console.log('Data:' in vue, this.username);
       console.log('DOM node in vue:', document.querySelector('.box'));
   },
   updated() {
       console.log('------------updated------------');
       console.log('Data:' in vue, this.username);
       console.log('DOM node in vue:', document.querySelector('.box'));
   },
   beforeDestroy() {
       console.log('------------beforeDestroy------------');
       console.log('Data:' in vue, this.username);
       console.log('DOM node in vue:', document.querySelector('.box'));
   },
   destroyed() {
       console.log('------------destroyed------------');
       console.log('Data:' in vue, this.username);
       console.log('DOM node in vue:', document.querySelector('.box'));
   },
}
</script>
Copy the code

LifecircleChild.vue

<template>
   <div class='box1'>{{ username }}</div>
</template>
<script>
export default {
   props: ['username'].beforeCreate() {
       console.log('------------beforeCreate lifecircle child------------');
       console.log('Data:' in vue, this.username);
       console.log('DOM node in vue:', document.querySelector('.box1'));
   },
   created() {
       console.log('------------created lifecircle child------------');
       console.log('Data:' in vue, this.username);
       console.log('DOM node in vue:', document.querySelector('.box1'));
   },
   beforeMount() {
       console.log('------------beforeMount lifecircle child------------');
       console.log('Data:' in vue, this.username);
       console.log('DOM node in vue:', document.querySelector('.box1'));
   },
   mounted() {
       console.log('------------mounted lifecircle child------------');
       console.log('Data:' in vue, this.username);
       console.log('DOM node in vue:', document.querySelector('.box1'));
   },
   
   beforeUpdate() {
       console.log('------------beforeUpdate lifecircle child------------');
       console.log('Data:' in vue, this.username);
       console.log('DOM node in vue:', document.querySelector('.box1'));
   },
   updated() {
       console.log('------------updated lifecircle child------------');
       console.log('Data:' in vue, this.username);
       console.log('DOM node in vue:', document.querySelector('.box1'));
   },
   beforeDestroy() {
       console.log('------------beforeDestroy lifecircle child------------');
       console.log('Data:' in vue, this.username);
       console.log('DOM node in vue:', document.querySelector('.box1'));
   },
   destroyed() {
       console.log('------------destroyed lifecircle child------------');
       console.log('Data:' in vue, this.username);
       console.log('DOM node in vue:', document.querySelector('.box1'));
   },
}
</script>
Copy the code

Presents the lifecircle. Ts

import {
  Component, OnInit, SimpleChanges, AfterContentChecked,
  AfterContentInit, AfterViewInit, AfterViewChecked, OnDestroy, OnChanges
} from '@angular/core';

@Component({
  selector: 'app-lifecircle',
  template: `
  <div class='box'>
    <h1>Lifecycle</h1>
    <app-lifecircle-child [username]="username"></app-lifecircle-child>
    <button (click)="changeName()">changeName</button>
  </div>
  `,
})
export class LifecircleComponent implements
OnInit, OnChanges, AfterContentChecked, AfterContentInit, AfterViewInit, AfterViewChecked, OnDestroy {
  public username = 'Kobe';
  constructor() {
    console.log('------------constructor------------');
    console.log('Angular Properties:', this.username);
    console.log('angular里面的dom节点: ', document.querySelector('.box'));
  }
  ngOnChanges(changes: SimpleChanges): void {
    console.log('------------ngOnChanges------------');
    console.log('Angular Properties:', this.username);
    console.log('angular里面的dom节点: ', document.querySelector('.box'));
  }
  ngOnInit(): void {
    console.log('------------ngOnInit------------');
    console.log('Angular Properties:', this.username);
    console.log('angular里面的dom节点: ', document.querySelector('.box'));
  }

  ngAfterContentInit(): void {
    console.log('------------ngAfterContentInit------------');
    console.log('Angular Properties:', this.username);
    console.log('angular里面的dom节点: ', document.querySelector('.box'));
  }
  ngAfterContentChecked(): void {
    console.log('------------ngAfterContentChecked------------');
    console.log('Angular Properties:', this.username);
    console.log('angular里面的dom节点: ', document.querySelector('.box'));
  }
  ngAfterViewInit(): void {
    console.log('------------ngAfterViewInit------------');
    console.log('Angular Properties:', this.username);
    console.log('angular里面的dom节点: ', document.querySelector('.box'));
  }
  ngAfterViewChecked(): void {
    console.log('------------ngAfterViewChecked------------');
    console.log('Angular Properties:', this.username);
    console.log('angular里面的dom节点: ', document.querySelector('.box'));
  }

  changeName() {
    this.username = 'Sunji'; }}Copy the code

Presents lifecircle – child. Ts

import { Component, OnInit, Input, OnChanges, AfterContentChecked, AfterContentInit, AfterViewInit, AfterViewChecked, OnDestroy, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-lifecircle-child',
  template: `
    <div class='box1'>{{ username }}</div>
  `,
})
export class LifecircleChildComponent implements
OnInit, OnChanges, AfterContentChecked, AfterContentInit, AfterViewInit, AfterViewChecked {
  @Input() username: string;
  constructor() {
    console.log('------------LifecircleChild constructor------------');
    console.log('Angular Properties:', this.username);
    console.log('angular里面的dom节点: ', document.querySelector('.box'));
  }
  ngOnChanges(changes: SimpleChanges): void {
    console.log('------------LifecircleChild ngOnChanges------------');
    console.log('Angular Properties:', this.username);
    console.log('angular里面的dom节点: ', document.querySelector('.box'));
  }
  ngOnInit(): void {
    console.log('------------LifecircleChild ngOnInit------------');
    console.log('Angular Properties:', this.username);
    console.log('angular里面的dom节点: ', document.querySelector('.box'));
  }

  ngAfterContentInit(): void {
    console.log('------------LifecircleChild ngAfterContentInit------------');
    console.log('Angular Properties:', this.username);
    console.log('angular里面的dom节点: ', document.querySelector('.box'));
  }
  ngAfterContentChecked(): void {
    console.log('------------LifecircleChild ngAfterContentChecked------------');
    console.log('Angular Properties:', this.username);
    console.log('angular里面的dom节点: ', document.querySelector('.box'));
  }
  ngAfterViewInit(): void {
    console.log('------------LifecircleChild ngAfterViewInit------------');
    console.log('Angular Properties:', this.username);
    console.log('angular里面的dom节点: ', document.querySelector('.box'));
  }
  ngAfterViewChecked(): void {
    console.log('------------LifecircleChild ngAfterViewChecked------------');
    console.log('Angular Properties:', this.username);
    console.log('angular里面的dom节点: ', document.querySelector('.box')); }}Copy the code

Differences and similarities