vue-生命周期

<template>

  <div class="hello">

      <p v-show="isShow" style="color:red;font-size:25px;">{{str1}}</p>

      <p v-show="!isShow" style="color:green;font-size:25px;">{{str2}}</p>

      <p>----------------------</p>

      <button @click="destroy">销毁</button>

  </div>

</template>

<script>

export default {

  name: 'LifeCircle',

  data() {

   return {

      isShow:false,

      str1:'学院',

      str2:'web'

   }

  },

  methods:{

    destroy(){

        this.$destroy();

    }

  },

  beforeCreate(){

    console.log('子-1 beforeCreate()'); 

  },

  created(){

    console.log('子-2 created()'); 

  },

  beforeMount(){

     console.log('子-3 beforeMount()');  

  },

  mounted(){

     console.log('子-4 mounted()');  

     // 定时器

     this.intervalId = setInterval(()=>{

        this.isShow = !this.isShow;

     },1000);    

  },

  beforeUpdate(){

     console.log('子-5 beforeUpdate()');  

  },

  updated(){

     console.log('子-6 updated()');  

  },

  beforeDestroy(){

    console.log('子-7 beforeDestroy()');  

    // 清除定时器

    clearInterval(this.intervalId)

  },

  destroyed(){

       console.log('子-8 destroy()');  

  }

}

</script>

 <style scoped>

 

</style>

 

App.js 

 

<template>

  <div id="app"> 

     <!-- <HelloWorld />

     <Template /> -->

     <!-- <ComputedAndWatch /> --> 

     <!-- <ClassAndStyle /> -->

     <!-- <IfAndShow /> --> 

    <!-- <IfAndElse /> -->

    <!-- <listReander /> --> 

    <!-- <listReanderDemo /> -->

    <!-- <Other /> --> 

    <!-- <Event /> -->

    <!-- <Demo /> -->

    <!-- <LkFilter/> -->

    <!-- <TransitionAndAnimateOne/> -->

    <!-- <TransitionAndAnimateTwo/> -->

    <!-- <TransitionAndAnimateThree/> -->

    <!-- <TransitionAndAnimateFour/> -->

    <LifeCircle/>

     

  </div>

</template>

<script>

import HelloWorld from './components/HelloWorld.vue'

import Template from './components/Template.vue'

import ComputedAndWatch from './components/ComputedAndWatch.vue'

import ClassAndStyle from './components/ClassAndStyle.vue'

import IfAndShow from './components/IfAndShow.vue'

import IfAndElse from './components/IfAndElse.vue'

import listReander from './components/listReander.vue'

import listReanderDemo from './components/listReanderDemo.vue'

import Other from './components/Other.vue'

import Event from './components/Event.vue'

import Demo from './components/Demo.vue'

import LkFilter from './components/LkFilter.vue' 

import TransitionAndAnimateOne from './components/TransitionAndAnimateOne.vue' 

import TransitionAndAnimateTwo from './components/TransitionAndAnimateTwo.vue' 

import TransitionAndAnimateThree from './components/TransitionAndAnimateThree.vue'

import TransitionAndAnimateFour from './components/TransitionAndAnimateFour.vue'

import LifeCircle from './components/LifeCircle.vue'

export default {

  name: 'app',

  components: {

    HelloWorld,

    Template,

    ComputedAndWatch,

    ClassAndStyle,

    IfAndShow,

    IfAndElse,

    listReander,

    listReanderDemo,

    Other,

    Event,

    Demo,

    LkFilter,

    TransitionAndAnimateOne,

    TransitionAndAnimateTwo,

    TransitionAndAnimateThree,

    TransitionAndAnimateFour,

    LifeCircle

  },

    beforeCreate(){

    console.log('父-1 beforeCreate()'); 

  },

  created(){

    console.log('父-2 created()'); 

  },

  beforeMount(){

     console.log('父-3 beforeMount()');  

  },

  mounted(){

     console.log('父-4 mounted()');    

  },

  beforeUpdate(){

     console.log('父-5 beforeUpdate()');  

  },

  updated(){

     console.log('父-6 updated()');  

  },

  beforeDestroy(){

    console.log('父-7 beforeDestroy()');   

  },

  destroyed(){

       console.log('父-8 destroy()');  

  }

}

</script>

<style>

 

</style>

 执行流程