Vue生命周期钩子函数
vue 生命周期钩子函数可以理解为 vue 实例从创建到销毁的一个个阶段，每个阶段的内部构造都是不一样的，可以在不同的阶段做相应的处理
Vue生命周期钩子函数包括：
beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedactivated（keep-alive组件专属）deactivated（keep-alive组件专属）beforeDestroydestroyederrorCaptured（2.5.0+ 新增）
| 生命周期钩子 | 详情 |
|---|---|
| beforeCreate | 在实例初始化之后，数据观测(data observer) 之前调用该钩子，此时无法获取 data，不能使用 watch 监听，可以加入 loading 事件 |
| created | 实例已经创建完成之后调用该钩子，此时实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调 data 被初始化，可以获取 data和调用 watch 监听，但是页面还是空白，结束 loading 事件，可以进行一些数据，资源的请求 |
| beforeMount | 在挂载开始之前调用该钩子，相关的 render 函数首次被调用，完成 el 初始化，页面依然是空白 |
| mounted | el 被新创建的 vm.$el 替换，并挂载到实例之后调用该钩子，实例挂载完成，此时页面已经有内容，可以访问到 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 钩子之外，其他钩子按照以上顺序
Vue组件嵌套时生命周期钩子函数
加载渲染过程：
父组件beforeCreate => 父组件created => 父组件beforeMount => 子组件beforeCreate => 子组件created => 子组件beforeMount => 子组件mounted => 父组件mounted
子组件更新过程：
父组件beforeUpdate => 子组件beforeUpdate => 子组件updated => 父组件updated
组件销毁过程：
父组件beforeDestroy => 子组件beforeDestroy => 子组件destroyed => 父组件destroyed
参考资料
来源：CSDN
作者：廊坊吴彦祖
链接：https://blog.csdn.net/weixin_45426836/article/details/104343274