Vue生命周期钩子函数

Vue生命周期钩子函数
vue 生命周期钩子函数可以理解为 vue 实例从创建到销毁的一个个阶段，每个阶段的内部构造都是不一样的，可以在不同的阶段做相应的处理（vue 生命周期钩子会自动绑定 this 上下文到实例中，因此可以访问数据，对属性和方法进行操作）
Vue生命周期钩子函数包括：
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated（keep-alive组件专属）
deactivated（keep-alive组件专属）
beforeDestroy
destroyed
errorCaptured（2.5.0+ 新增）
生命周期钩子
详情
beforeCreate
在实例初始化之后，数据观测(data observer) 之前调用该钩子，此时实例还未创建，无法获取 data，不能使用 watch 监听，可以加入 loading 事件
created
实例已经创建完成之后调用该钩子，此时实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调 data 被初始化，可以获取 data和调用 watch 监听，但是页面还是空白，结束 loading 事件，可以进行一些数据，资源的请求
beforeMount
在挂载开始之前调用该钩子，页面未渲染，dom 未创建，相关的 render 函数首次被调用，完成 el 初始化，但并未被挂载，页面依然是空白
mounted
el 被新创建的 vm.$el 替换，并挂载到实例之后调用该钩子，实例挂载完成，此时 dom 已经创建，页面已经有内容，可以访问到 dom 和进行 dom 操作，如果返回的数据操作依赖 dom 完成，推荐这个时候发送数据请求
beforeUpdate
数据更新时调用该钩子，发生在虚拟 dom 重新渲染和打补丁之前，可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程
updated
数据更改导致的虚拟 dom 重新渲染和打补丁之后调用该钩子，此时数据更新完毕，可以执行依赖于 dom 的操作，应该避免在此期间更改状态，可能会导致更新无限循环
activated
keep-alive 组件专属，keep-alive 组件激活时调用该钩子
deactivated
keep-alive 组件专属，keep-alive 组件移除时调用该钩子
beforeDestroy
实例销毁之前调用该钩子，此时实例仍然完全可用，可以清除定时器或者子组件以及事件监听器，解除事件绑定
destroyed
实例销毁后调用该钩子，此时实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
errorCaptured
当捕获一个来自子孙组件的错误时调用该钩子，该钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串，该钩子可以返回 false 以阻止该错误继续向上传播
注： 除了 beforeCreate 和 created 钩子之外，其他钩子在服务器端渲染期间都不会被调用 
除了 errorCaptured 钩子之外，其他钩子按照以上顺序
建议： 页面数据请求在 created 钩子中完成（mounted 钩子中页面 dom 已经生成，请求页面数据渲染页面可能会导致页面闪动）
Vue组件嵌套时生命周期钩子函数
加载渲染过程：
父组件beforeCreate => 父组件created => 父组件beforeMount => 子组件beforeCreate => 子组件created => 子组件beforeMount => 子组件mounted => 父组件mounted
子组件更新过程：
父组件beforeUpdate => 子组件beforeUpdate => 子组件updated => 父组件updated
父组件更新过程：
父组件beforeUpdate => 父组件updated
组件销毁过程：
父组件beforeDestroy => 子组件beforeDestroy => 子组件destroyed => 父组件destroyed
参考资料
https://cn.vuejs.org/v2/api/#选项-生命周期钩子