vue2.5.2组件生命周期理解系列

最近在做vue的项目，对于组件的生命周期，理解得非常差劲，只会在created阶段提交一下数据，但是对于mounted，updated等这种从字面意思上去理解的很容易，实际上不操作根本理解不了的生命周期，没有一处是用到的。于是我就在思考，vue设计组件周期的原因是什么？是为了让开发者更难理解，更难开发吗？显然不是。尤雨溪把组件的生命周期划分地这么细致，一定是有他的道理在的，至少他是在为开发者提供一种便利，什么阶段需要做什么事情。

从自己面向结果编程的bug中里，完全体会不到这些生命周期的意义所在，因此我将结合vue官方文档+vue源码+jsfiddle在线实践，一一剖析vue的组件生命周期的各个阶段。

准备资料：
vue文档：https://cn.vuejs.org/
vue源码：https://github.com/vuejs/vue/blob/dev/dist/vue.js
jsfiddle：https://jsfiddle.net/betterbetter/j9cj2vnb/

所有demo将会保存在jsfiddle以及github，同时也会在简书和segmentFault同步更新生命周期理解系列文章。
这是vue源码中的生命周期钩子定义代码

var LIFECYCLE_HOOKS = [
  'beforeCreate',
  'created',
  'beforeMount',
  'mounted',
  'beforeUpdate',
  'updated',
  'beforeDestroy',
  'destroyed',
  'activated',
  'deactivated',
  'errorCaptured'
];

根据以上代码，我们清晰地看到，vue组件生命周期共有11个，因此本系列将有11篇文章，结合实践深度理解各个生命周期的存在意义以及适用场景。
1.vue2.5.2组件生命周期理解系列（一）---------beforeCreate
2.vue2.5.2组件生命周期理解系列（二）---------created
3.vue2.5.2组件生命周期理解系列（三）---------beforeMount
4.vue2.5.2组件生命周期理解系列（四）---------mounted
5.vue2.5.2组件生命周期理解系列（五）---------beforeUpdate
6.vue2.5.2组件生命周期理解系列（六）---------updated
7.vue2.5.2组件生命周期理解系列（七）---------beforeDestroy
8.vue2.5.2组件生命周期理解系列（八）---------destroyed
9.vue2.5.2组件生命周期理解系列（九）--------activated
10.vue2.5.2组件生命周期理解系列（十）---------deactivated
11.vue2.5.2组件生命周期理解系列（十一）---------errorCaptured

文章列表github地址献上：https://github.com/FrankKai/sfs-blog/issues/4