关于vue生命周期理解

在开发过程中总是遇到数据不能正常展示，有时是因为dom结构未生成等原因，因此此时对于生命周期的理解非常重要，
他可以帮助我们在合适的时机编写需要的业务逻辑

vue实例的生命周期

beforeCreate

vue实例创建之前,此时vue实例的data属性与dom结构都是未定义状态,此时均不可使用

  beforeCreate:function(){
    console.log('即将创建');
    console.log(this.$data);
    console.log(this.$el);
  }

输出：

  即将创建
  undefined
  undefined

create

beforeCreate之后的状态是create，此时vue实例的data属性已经创建，但是dom结构还是是未定义状态，因此this.$el依旧是ubdefined

  create:function(){
    console.log(this.$data);
    console.log(this.$el);
  }

输出：

  Object对象
  undefined

beforeMount

vue实例中的data数据挂载之前，此阶段dom结构创建完毕,因此$el存在了，但是vue实例的data数据还没有挂载到页面中

  beforeMount(){
    console.log('即将挂载');
    console.log(this.$el);
  }

输出：

  即将挂载
  <div id="app">{{name}}</div>

mounted

vue实例的data数据挂载完毕阶段，此时{{name}}被渲染

  mounted:function(){
    console.log('挂载完毕');
    console.log(this.$el);
  }

输出：

  挂载完毕
  <div id="app">name的真实值</div>

beforeUpdate

vue实例创建渲染完成后,此时vue实例的data数据发生变更，此时需要重新渲染页面，即重新挂载新的data数据，
在重新渲染数据之前触发beforeUpdate，$refs可以用于获取之前的属性值，
{{name}}原有值：’name的真实值’
{{name}}最新值：’name的最新值’

  beforeUpdate:function(){
    console.log('数据发生变更，重新渲染页面');
    let name = this.$refs.app.innerHTML;
    console.log('name:'+name);
  }

输出：

  数据发生变更，重新渲染页面
  name的真实值

可以用于在发生变化重新渲染前进行数据处理

updated

可以用于编写渲染完成时的逻辑

  updated:function(){
    console.log('数据发生变更，重新渲染页面完成');
    let name = this.$refs.app.innerHTML;
    console.log('name:'+name);
  }

输出：

  数据发生变更，重新渲染页面完成
  name的最新值

beforeDestroy

调用实例的destroy( )方法可以销毁当前的组件，在销毁前，会触发beforeDestroy钩子,
销毁前还可使得视图发生变更

  beforeDestroy:function(){
      //销毁前需要处理的内容
  }

destroyed

成功销毁之后，会触发destroyed钩子，此时该实例与其他实例的关联已经被清除，它与视图之间也被解绑。
此时在操作实例视图也不会再发生变更

  destroyed:function(){
    console.log('销毁实例');
  }

输出：

  销毁实例

actived

keep-alive组件被激活的时候调用

deactivated

keep-alive 组件停用时调用

var vue = new Vue({
        el: "#app",
        data: {
            name: 'name的真实值',
        },
        methods: {

        },
        mounted:function(){
        }
})