9. Life Cycle function

Life-cycle function, also called lifecycle hook means mounted components as well as a range of methods to destroy components triggered.

 New Life.vue components in the components directory, is used to demonstrate the life cycle functions

< Template > 
    < div > 
        < H2 > {{MSG}} </ H2 > 
        
    </ div > 
</ Template > 
< Script > 
Export default { 
  name: ' Life ' ,   
  Data () { 
    return { 
        MSG: ' lifecycle methods demo ' 
    } 
  }, 
  Methods: {}, 
  beforeCreate () { 
      the console.log ( ' prior to creating instances ' ) 
  },  
  created () {
      Console.log( ' instance is created (used for obtaining data from the background.) ' ) 
  }, 
  beforeMount () { 
      the console.log ( ' before template compiler ' ) 
  }, 
  Mounted () { 
      the console.log ( ' Template compiled ' ) 
  }, 
  beforeUpdate () { 
      the console.log ( ' prior to the data update ' ) 
  }, 
  updated () { 
      the console.log ( ' data updated ' ) 
  }, 
  beforeDestroy () { 
      the console.log ( ' previous examples destruction ' ) 
  }, 
  Destroyed () {
      the console.log ( ' Examples of complete destruction ' ) 
  } 
  
} 
</ Script > 
< style lang = "SCSS" scoped > 
H2 { 
    Color : Green ; 
} 
</ style >

Cited in Home.vue components

< Template > 
    < div > 
        < h2 > This is a component Home </ h2 > 
        < the Button @click = "RUN" > pop-up prompts components Home </ the Button > 
        < v-Life v-IF = "Flag" > </ v -Life > 
        < br > 
        < Button @click = "GUA ()" > Mounting assembly examples uninstall </ Button > 
    </ div > 
</ Template > 
<script>
import Life from './Life.vue';
export default {
  name: 'home',  
  data () {
    return {
        msg:'首页组件',
        flag:true
    }
  },
  methods:{
    run(){
        alert(this.msg)
    },
    gua(){
      this.flag=!this.flag
    }
  },
  components:{
    'v-life':Life
  }

}
</script>
<style lang="scss" scoped>
h2{
    color: red;
}
</style>