Vue.js life cycle

I have been working on projects with Vue recently, so understanding the life cycle is very important to understand vue:

The official explanation of the vue life cycle is given:

              

Even if the official gives more details, 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>

result :