vuejs2.0 vue实例的生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。

（抱歉图片无法加载否则会更详细 ， 希望下面的介绍会对各位有所帮助）

beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。Vue在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。那么，在这些vue钩子中，vue实例到底执行了那些操作，我们先看下面执行的例子

 var vm = new Vue({
el: "#container",
data: {
    test : 'hello world'
},
beforeCreate: function(){
    console.log(this);
    showData('创建vue实例前',this);
},
created: function(){
    showData('创建vue实例后',this);
},
beforeMount:function(){
    showData('挂载到dom前',this);
},
mounted: function(){
    showData('挂载到dom后',this);
},
beforeUpdate:function(){
    showData('数据变化更新前',this);
},
updated:function(){
    showData('数据变化更新后',this);
},
beforeDestroy:function(){
    vm.test ="3333";
    showData('vue实例销毁前',this);
},
destroyed:function(){
    showData('vue实例销毁后',this);
}

   });

function realDom(){
console.log('真实dom结构：' + document.getElementById('container').innerHTML);
   }
  function showData(process,obj){
  console.log(process);
 console.log('data 数据：' + obj.test)
 console.log('挂载的对象：')
 console.log(obj.$el)
 realDom();
 console.log('------------------')
 console.log('------------------')
  }

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。