vue的四个生命周期

Vue的一生包含四个阶段：创建->挂载->更新->销毁

1、创建

<div id="app">
    <son></son>
  </div>
   <!-- 子组件 -->
   <template id="son">
    <div >
      这里是子组件
      <p ref="p">{{num}}</p>  
    </div>
  </template>
<script>

  Vue.component('son', {
    template: '#son',
    data() {
      return {
        num: 4
      }
    },
    beforeCreate(){
      // 实例已经创建 事件 生命周期ok 没有数据，没有真实dom
      console.log('beforeCreate')
      console.log(this)
      console.log(this.num)
      console.log(this.$refs.p)
    },
    created() {
      console.log('created')
      //创建结束 有数据 有this 没有真实dom
      // 修改数据，并且不会触发更新相关的生命周期
      // 网络请求数据
      console.log(this)
      this.num = 5
      console.log(this.num) // 数据有
      console.log(this.$refs.p) // 没有
    }
  })

  new Vue({}).$mount('#app')

</script>

2、挂载

div id="app">
    <son></son>
  </div>
   <!-- 子组件 -->
   <template id="son">
    <div >
      这里是子组件
      <p ref="p">{{num}}</p>  
    </div>
  </template>
<script>

  Vue.component('son', {
    template: '#son',
    data() {
      return {
        num: 4
      }
    },
    beforeMount(){
      // 和created类似 有this 有数据 无dom
      // 修改数据和网络请求
      console.log('beforeMount')
      console.log(this)
      console.log(this.num)
      console.log(this.$refs.p)
    },
    mounted() {
      // 什么都有 有this，有数据，有真实dom
      // dom初始化的操作
      // 做数据修改会触发到update的生命周期
      console.log('mounted')
      console.log(this)
      console.log(this.num) // 数据有
      this.num = 5
      console.log(this.$refs.p) // 没有
    }
  })

  new Vue({}).$mount('#app')

</script>

3、更新

<div id="app">
    <son></son>
  </div>
   <!-- 子组件 -->
   <template id="son">
    <div >
      这里是子组件
      <p ref="p">{{num}}</p>  
      <button @click="change"> 改变</button>
    </div>
  </template>
<script>

  Vue.component('son', {
    template: '#son',
    data() {
      return {
        num: 4
      }
    },
    methods: {
      change() {
        this.num ++;
      }
    },
    // beforeMount() {
    //   this.num = 5
    // },
    // mounted() {
    //   this.num = 5
    // },
    beforeUpdate() {
      // 挂载之后数据更新的时候触发，数据发生改变，dom还未修改
      console.log('更新之前')
      console.log(this)
      console.log(this.num) // 更新后的数据
      // this.num = 8
      console.log(this.$refs.p) // 更新前的数据
      console.log(this.$refs.p.innerHTML) // 更新前的数据
      setTimeout(()=>{
        console.log('setTimeOut',this.$refs.p.innerHTML) // 更新后的数据
      })
    },
    updated() {
      // 数据和dom都是最新的
      // 更新的声明周期做数据的修改？
      console.log('更新结束')
      console.log(this)
      // this.num = 8;
      // this.num = Math.random();
      // 做数据修改注意在注意！！！！！
      console.log(this.num) // 更新后的数据
      console.log(this.$refs.p) // 更新前的数据
      console.log(this.$refs.p.innerHTML) // 更新前的数据
    }
  })

  new Vue({}).$mount('#app')

</script>

4、销毁

<div id="app">
    <button @click="toggle">销毁</button>
    <son class="son" v-if="show"></son>
  </div>
   <!-- 子组件 -->
   <template id="son">
    <div >
      <p ref="p">这里是子组件 {{num}}</p>
    </div>
  </template>
<script>

  Vue.component('son', {
    template: '#son',
    data() {
      return {
        num: 4
      }
    },
    mounted() {
      this.timmer= setInterval(() => {
        console.log(1)
      }, 1000);
    },
    beforeDestroy() {
      console.log('销毁之前')
      // 啥都有但是没什么用
      console.log(this)
      console.log(this.num)
      console.log(this.$refs.p)
    },
    destroyed() {
      // 销毁完成 回顾一生 弥补遗憾
      clearInterval(this.timmer)
      console.log('销毁结束')
      console.log(this)
      console.log(this.num)
      console.log(this.$refs.p)
    }
  })

  new Vue({
    data: {
      show: true,
    },
    methods: {
      toggle() {
        this.show = !this.show
      }
    }
  }).$mount('#app')

</script>

Vue的生命周期细致的划分可以分为八个阶段，分别是：创建前（beforeCreate）、创建后（created）、挂载前（beforeMount）、挂载后（mounted）、更新前（beforeUpdate）、更新后（updated）、销毁前（beforeDestroy）、销毁后 （destroyed），如下图：