Vue.js 生命周期

最近一直是在用Vue做项目 , 所以了解生命周期对于了解vue十分重要 :

官方给出对vue生命周期的解释 :

              

即便官方给的再详细 , but we need have a try ! : )

<template>
<div>
  <div >{{a}}</div>
  <button @click="counter += 1">{{counter}}</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {

        a: "Vue.js",
        counter:1
      }
    },
    methode:{
      change(){
          this.a = 'vue'
      }
    },


    beforeCreate: function () {


      console.log("创建前")
      console.log(this.a)
      console.log(this.$el)

    },

    created: function () {

      console.log("创建之后");
      console.log(this.a)
      console.log(this.$el)

    },

    beforeMount: function () {

      console.log("mount之前")
      console.log(this.a)
      console.log(this.$el)

    },

    mounted: function () {

      console.log("mount之后")
      console.log(this.a)
      console.log(this.$el)

    },

    beforeUpdate: function () {

      console.log("更新前");
      console.log(this.a)
      console.log(this.$el)

    },

    updated: function () {

      console.log("更新完成");
      console.log(this.a);
      console.log(this.$el)

    },

    beforeDestroy: function () {

      console.log("销毁前");
      console.log(this.a)
      console.log(this.$el)
      console.log(this.$el)

    },

    destroyed: function () {

      console.log("已销毁");
      console.log(this.a)
      console.log(this.$el)

    }
  }


</script>

结果 :