Vue学习笔记（2）—— Vue的生命周期

(转自优快云)面试碰到这个问题了，回想一下，很多问题都是写代码的时候碰到了随查随写缺少总结，真到了要说点什么的时候就说的乱七八糟，那么这次就来捋一捋Vue的生命周期

生命周期，就是Vue实例在被创建之前要经过一系列的初始化过程。首先，放一张Vue官网的生命周期图示。
图示中可以看到，Vue的生命周期中顺序的包含了以下几个生命周期钩子，然后结合生命周期我们逐一讨论：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

1. beforeCreate

在这个生命周期，组件实例刚刚被创建但尚未创建完成，而组件属性如$el、data等都还没有计算。

2. created

组件实例已创建完成，data等属性已绑定完成，但DOM尚未生成，$el 属性还不存在

3. beforeMount

即模板编译、挂载之前，这个生命周期，首先会判断是否存在el选项，存在则继续编译，否则停止编译、生命周期暂停直到调用vm.$mount(el)方法才会继续向下编译，这个el参数就是挂载的DOM节点。 接下来会判断是否存在template选项，存在则将其作为模板编译成render函数，否则将el的外部HTML作为模板编译。
另外vue对象中存在一个render函数，它的优先级大于template。

4. mounted

即模板编译、挂载之后，这里会给vue实例对象添加$el成员，并且替换掉挂载的DOM元素。举例而言，我们写在页面的<div>{{msg}}</div>是在这里把实例里的msg值渲染上去的。

5. beforeUpdate

data的数据发生改变时，会触发对应组件的重新渲染，这时可以检测到data变化但是view还没有重新渲染。

6. updated

view层被重新渲染，数据更新。

6. beforeDestroy

beforeDestroy在实例被销毁之前，这时实例仍然完全可用。

7. destroyed

destroyed 在实例被销毁之后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

---

生命周期就讨论到这里了，觉得比较抽象的盆友可以自己写demo测试一下，会更直观一些，或者参考一下更详细的文章把。

参考文章：

Vue2.0 探索之路——生命周期和钩子函数的一些理解
Vue官网文档
详解vue生命周期