最近一直是在用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>

结果 :

            

原文发布时间为：2018年02月10日
原文作者：葉子君 

本文来源：开源中国 如需转载请联系原作者