Eight hook functions of Vue life cycle

Method name	meaning
beforeCreate	Called before the data is initialized. At this time, data and methods have no data.
created	Called after the data is initialized, at this time data and methods have corresponding data.
beforeMount	Used when the page has not been rendered, that is, the Vue data has not been transmitted to the page.
mounted	Used after the page is rendered, that is, the page has completely taken out the data in Vue at this time.
beforeUpdate	Before data is updated.
updated	data data update.
beforeDestroy	Before the component is destroyed.
destroyed	After the component is destroyed.

demo.vue code

<template>
  <div id="app">
    {
    
    {
    
    msg}}
    <button @click="dochange()">Change Content</button>
  </div>
</template>
<script>

export default {
    
    
  data(){
    
    
    return {
    
    
      msg:"hello"
    }
  },mounted(){
    
    
    console.log("this is my demo ....");
  },beforeCreate(){
    
    
    console.log("before created");
  },created(){
    
    
    console.log("created");
  },beforeMount(){
    
    
    console.log("before mount");
  },mounted(){
    
    
    console.log("mounted");
  },beforeUpdate(){
    
    //当数据发生改变得时候
    console.log("before update");
  },updated(){
    
    //当数据发生改变得时候
    console.log("updated");
  },beforeDestroy(){
    
    
    console.log("before destroy");
  },destroyed(){
    
    
    console.log("destroyed");
  },methods:{
    
    
    dochange(){
    
    
      this.msg="world";
      console.log("change...");
    }
  }
}
</script>