vue.js 中的生命周期包含三块：组件生命周期、路由生命周期、指令生命周期 。
所谓生命周期就是由一系列钩子函数组成的执行链，钩子函数，即特定时间段会执行的函数。

组件生命周期

image.png

如上图：
beforeCreate => created : data methods 开始初始化 ；
created : data , methods 初始化完成, el 为undifine；
created => beforeMount : 判断是否有 el 属性 没有就使用 $mount(el)挂载；有的话继续判断是否存在<template>标签，有的话编译标签元素并添加进render函数；没有的话将 el 元素外部看作被<template>标签包裹进行编译。
beforeMount : data , methods 初始化完成, el DOM结构生成，数据未挂载；
beforeMount =>mounted ：创建vm.$el 取代 el；
mounted : data , methods 初始化完成, el DOM结构生成，数据已挂载；
mounted => beforeUpdate : 数据发生改变；
beforeUpdate : 数据更新，DOM 未变；
beforeUpdate => updated ： 虚拟DOM 重新渲染，打补丁（很形象）；
updated ：数据更新，DOM 更新；
mounted => beforeDestroyed : 调用this.$distroy() ；
beforeDestroy：组件存在；
beforeDestroy =>destroyed : 清除所有事件监听，子组件;
destroyed : 组件不存在，this.$el //undifine .

路由生命周期

全局钩子：
beforeEach : 发生在跳转到导航界面之前，通常用来进行权限判断，next函数可以对跳转行为进行拦截；
afterEach : 在before之后，已确定即将跳转到目标页面，没有next函数，无法拦截；
组件钩子：
beforeRouteEnter : 发生在组件创建之前，通常在这里使用ajax进行页面所需数据的获取，再通过next将数据传递给data （在beforeCreate之前，next在mounted之后）
beforeRouteLeave : 发生在跳转到其他路由之前，可以在这里清除一些定时器或者阻止用户未保存页面修改就离开。（在beforeDestroy之前）

指令生命周期：

bind : 绑定到节点时执行 （created => beforeMount 期间）
inserted : 组件插入到DOM时执行 （beforeMount =>mounted 期间）
update : 指令传入值改变时执行
componentUpdate : 指令传入值改变后执行
unbind : 与节点解绑时执行 （beforeDestroy =>destroyed 期间）