浅谈Vue的生命周期

用Vue框架，熟悉它的生命周期可以让开发更好的进行。
首先先看看官网的图，详细的给出了vue的生命周期:

image.png

它可以总共分为8个阶段：
beforeCreate（创建前）,
created（创建后）,
beforeMount(载入前),
mounted（载入后）,
beforeUpdate（更新前）,
updated（更新后）,
beforeDestroy（销毁前）,
destroyed（销毁后）
然后用一个实例的demo 来演示一下具体的效果

  var vm = new Vue({
      el: '#app',
      beforeCreate () {
        console.log('创建前')
        console.log(this.msg, this.$el);
      },
      created() {
        console.log('创建后')
        console.log(this.msg, this.$el);
      },
      beforeMount () {
        console.log('dom加载前')
        console.log(this.msg, this.$el);
      },
      mounted () {
        console.log('dom加载后')
        console.log(this.msg, this.$el);
      },
      beforeUpdate () {
        console.log('更新前')
        console.log(this.msg, this.$el);
      },
      updated () {
        console.log('更新后')
        console.log(this.msg, this.$el);
      },
      beforeDestory () {
        console.log('销毁前')
        console.log(this.msg, this.$el);
      },
      destoryed () {
        console.log('销毁后')
        console.log(this.msg, this.$el);
      },
      data() {
        return {
          msg: 'Vue生命周期详解'
        }
      },
      methods: {
        handleChange () {
          this.msg = '数据更新了'
        }
      }
    })

demo