一.生命周期示意图

二.生命周期钩子

• beforeCreate
  在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
• created
  实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
• beforeMount
  在挂载开始之前被调用：相关的 render 函数首次被调用。
  (你可能有兴趣知道，Vue 的模板实际是编译成了 render 函数。这是一个实现细节，通常不需要关心)
• mounted
  el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内
• beforeUpdate
  数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
• updated
  由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
  当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。
• beforeDestroy
  实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed
  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('------------------')
  }
  

结果

当data发生改变时，会调用beforeUpdate和updated方法

可见
beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变
updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到dom上面，完成更新

实例销毁

beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据与view的绑定，即数据驱动