Vue把整个生命周期划分为创建、挂载、更新、销毁等阶段，每个阶段都会给一些“钩子”让我们来做一些我们想实现的动作。
分为以下几个阶段
1、beforeCreate
此阶段为实例初始化之后，数据观测 (data observer) 和 事件配置(event/watcher)之前被调用。
我们试着console一下实例的数据data和挂载元素el，代码如下:
<div id="app">{{name}}</div>
<script>
let app = new Vue({
el:"#app",
data:{
name:"Sarah"
},
beforeCreate(){
console.log('即将创建');
console.log(this.$data);
console.log(this.$el);
}
});
</script>
结果为：
即将创建
undefined
undefined
此时的实例中的data和el还是undefined,不可用的。
2. created
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeCreate之后紧接着的钩子就是创建完毕created，我们同样打印一下数据data和挂载元素el， 在上一段代码的基础上，加上下面这段代码：
created(){
console.log('创建完毕');
console.log(this.$data);
console.log(this.$el);
}
结果为：
创建完毕
{
name:"Sarah"
},
undefined
此时，我们能读取到数据data的值，但是DOM还没生成，所以属性el还不存在，输出$data为一个Object对象，而$el的值为undefined。
3. beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
上一个阶段我们知道DOM还没生成，属性el还为undefined，那么，此阶段为即将挂载，我们打印一下此时的$el是什么？
beforeMount(){
console.log('即将挂载');
console.log(this.$el);
}
我们看到打印结果：
即将挂载
undefined
此时的$el不再是undefined，而是成功关联到我们指定的dom节点
，但此时{{ name }}还没有被成功地渲染成我们data中的数据。没事，我们接着往下看。
4. mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：
mounted也就是挂载完毕阶段，到了这个阶段，数据就会被成功渲染出来，我们编写mounted的钩子，打印$el 看看：
打印结果：
挂在完毕
<div id="app">Sarah</div>
如我们所愿，此时打印属性el，我们看到{{ name }}已经成功渲染成我们data.name的值：“前端君”。
5. beforeUpdate
我们知道，当修改vue实例的data时，vue就会自动帮我们更新渲染视图，在这个过程中，vue提供了beforeUpdate的钩子给我们，在检测到我们要修改数据的时候，更新渲染视图之前就会触发钩子beforeUpdate。
html片段代码我们加上ref属性，用于获取DOM元素（后期会讲到）。
<div ref="app" id="app">
{{name}}
</div>
Vue实例代码加上beforeUpdate钩子代码：
beforeUpdate(){
console.log('=即将更新渲染=');
let name = this.$refs.app.innerHTML;
console.log('name:'+name);
},
我们试一下，在控制台修改一下实例的数据name，在更新渲染之前，我们打印视图中文本innerHTML的内容会是多少：
（gif图，加载需要点时间）
我们在控制台把app.name的值从原来的 “前端君” 修改成 “web前端教程”,在更新视图之前beforeUpdate打印视图上的值，结果依然为原来的值：“前端君”，表明在此阶段，视图并未重新渲染更新。
6. updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated
此阶段为更新渲染视图之后，此时再读取视图上的内容，已经是最新的内容，接着上面的案例，我们添加钩子updated的代码，如下：
updated(){
console.log('==更新成功==');
let name = this.$refs.app.innerHTML;
console.log('name:'+name);
}
结果如下：
（gif图，多看2遍，注意视图变化）
大家注意两个不同阶段打印的name的值是不一样，updated阶段打印出来的name已经是最新的值：“web前端教程”，说明此刻视图已经更新了。
7. beforeDestroy
调用实例的destroy( )方法可以销毁当前的组件，在销毁前，会触发beforeDestroy钩子。
8. destroyed
成功销毁之后，会触发destroyed钩子，此时该实例与其他实例的关联已经被清除，它与视图之间也被解绑。
案例：我们通过在销毁前通过控制台修改实例的name，和销毁之后再次修改，看看情况。
beforeDestroy(){
console.log('销毁之前');
},
destroyed(){
console.log('销毁成功');
}
效果如下图：
（gif图，多看2遍，注意视图变化）
销毁之前，修改name的值，可以成功修改视图显示的内容为：“更新视图”，一旦效用实例的$destroy( )方法销毁之后，实例与视图的关系解绑，再修改name的值，已于事无补，视图再也不会更新了，说明实例成功被销毁了。
9. actived
keep-alive组件被激活的时候调用。
10. deactivated
keep-alive 组件停用时调用。
关于keep-alive组件的激活和停用，我们后面讲到具体案例再介绍，在这里你只需要知道vue提供了keep-alive组件激活和停用的钩子就可以了。
以后最为常用的钩子是：created 成功创建。