使用Vue有一段时间了，也经历了几个项目的实战，但发现自己对Vue的理解还是不够深刻，很多时候偶然看到Vue文章才发现原来Vue还可以这么玩。所以决定重新观看Vue的文档深入理解，并写下一些笔记以供记忆。
个人觉得使用Vue之前，需要了解整个Vue的生命周期，清楚的认识到Vue在每个阶段的钩子函数，这样才可以更好让我们去使用Vue。
综述
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。
浅显的来说，生命周期的钩子函数就是回调函数，在不同的阶段有不同的回调函数供用户处理自定义的事件。
生命周期图例
从我的理解来说，Vue的生命周期主要可以分为四大部分，实例化（created），挂载/渲染（mounted），更新（updated），销毁（destroyed），这也是平时使用最多的钩子函数。
下面是完整的Vue生命周期图例。
实例化
beforeCreate
组件实例刚被创建，还没有计算组件属性，无法访问data值；一般在此阶段可以加载个一个loading事件。
此时访问data和$el都是undefined
created
组件已经绑定属性，但仍未渲染模板。就是说在created的钩子函数中，你可以处理data的数据，但是无法访问$el，此时$el的值为“虚拟”的元素节点，也就是在此阶段，你无法进行Dom的操作。如果你需要在created的时候进行Dom的处理，请务必在Vue.nextTick()函数中操作。
在这个阶段，一般做一些初始化操作，初始化一些自执行函数。
挂载/渲染
beforeMount
组件模板挂载/渲染之前的钩子函数，此阶段已经完成了$el和data初始化，但未挂载组件
mounted
在此阶段，组件已经编译完成并进行渲染，可以访问$el并进行Dom操作，但是需要注意一点的是，这里并不能保证组件已经存在document中。此阶段相当于在created中使用Vue.nextTick()。
此阶段一般执行数据请求，从后端获取数据。
更新
beforeUpdate
顾名思义，这个是在数据更新之前的钩子函数，可以处理数据保存之类的事件。
updated
这是在数据更新后的钩子函数，在此阶段，数据已完成更新,与数据绑定的Dom也已经渲染完成。
销毁
beforeDestoroy
组件销毁之前的钩子函数，一般在此阶段执行数据销毁的函数
destroyed
组件已经销毁，无法访问组件的任何信息。
栗子
var app = new Vue({
el: '#app',
data: {
},
beforeCreate(){
<!--无法访问data属性和$el-->
},
created(){
<!--已绑定data属性，但无法访问$el-->
},
beforeMount() {
<!--可以访问$el,但组件未渲染-->
},
mounted() {
<!--已完成组件渲染，可正常操作-->
},
beforeUpdate() {
<!--数据更新前的钩子函数-->
},
updated() {
<!--数据已更新，相关dom已重新渲染-->
},
beforeDestroy() {
<!--销毁组件前的钩子函数-->
},
destroyed() {
<!--组件已销毁-->
}
})
