简述一下组件的生命周期

> 在进行组件化项目开发的时候都会存在一个组件的生命周期概念，像Vue、React、小程序等等，无一例外，而通常情况组件的生命周期主要分成三个阶段，包括：创建、更新以及销毁阶段。
>
> Vue的生命周期钩子函数主要包括：
>
> 1. beforeCreate(): 在实例初始化之后调用, data和methods都还没有初始化完成, 通过this不能访问
> 2. created(): 此时data和methods都已初始化完成, 可以通过this去操作, 可以在此发ajax请求
> 3. beforeMount(): 模板已经在内存中编译, 但还没有挂载到页面上, 不能通过ref找到对应的标签对象
> 4. mounted(): 页面已经初始显示, 可以通过ref找到对应的标签, 也可以选择此时发ajax请求
> 5. beforeUpdate(): 在数据更新之后, 界面更新前调用, 只能访问到原有的界面
> 6. updated(): 在界面更新之后调用, 此时可以访问最新的界面
> 7. beforeDestroy(): 实例销毁之前调用, 此时实例仍然可以正常工作
> 8. destroyed(): Vue 实例销毁后调用, 实例已经无法正常工作了
> 9. deactivated():组件失活, 但没有死亡
> 10. activated(): 组件激活, 被复用
> 11. errorCaptured(): 用于捕获子组件的错误,return false可以阻止错误向上冒泡(传递)
>
> **我们通常在created()/mounted()进行发送ajax请求，启动定时器等异步任务，而在beforeDestory()做收尾工作，如: 清除定时器操作。**
>
> **不过需要注意的是mounted生命周期钩子中并不代表界面已经渲染成功，因为 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick。**
>
> Vue的生命周期钩子函数又分为了：单个组件生命周期、父子组件的生命周期、带缓存的路由组件生命周期等不同的状态，在不同的状态下所拥有的生命周期内容是不相同的。
>
> - 单个组件生命周期
> 初始化：
> - beforeCreate
> - created
> - beforeMount
> - mounted
>
> 更新：
>
> - beforeUpdate
> - updated
>
> 销毁：
>
> - beforeDestroy
> - destroyed
>
>
>
> - 父子组件的生命周期
> 初始化:
> - beforeCreate
> - created
> - beforeMount
> - --child beforeCreate
> - --child created
> - --child beforeMount
> - --child mounted
> - mounted
>
> 更新:
>
> - beforeUpdate
> - --child beforeUpdate
> - --child updated
> - updated
>
> 销毁:
>
> - beforeDestroy
> - -- child beforeDestroy
> - -- child destroyed
> - destroyed
>
>
>
> - 带缓存的路由组件生命周期
> 初始化:
> - ...
> - mounted
> - --Child activated
> - activated
>
> 路由离开
>
> - --Child deactivated
> - deactivated
>
> 路由回来
>
> - --Child activated
> - activated
>
>
>
> - 捕获子组件错误的勾子
> 子组件执行抛出错误
> - errorCaptured
>
>
>
> | 阶段 | Vue | React | 小程序应用 | 小程序页面 |
> | -------- | ------------- | --------------------------------- | ---------- | ---------- |
> | 创建 | beforeCreate | constructor() | onLaunch | onLoad |
> | | created | static getDerivedStateFromProps() | | onShow |
> | | beforeMount | render() | | onReady |
> | | mounted | componentDidMount() | | |
> | | | | | |
> | 更新 | beforeUpdate | static getDerivedStateFromProps() | onShow | onShow |
> | | updated | shouldComponentUpdate() | onHide | onHide |
> | | deactivated | render() | | |
> | | activated | getSnapshotBeforeUpdate() | | |
> | | | componentDidUpdate() | | |
> | | | | | |
> | 销毁 | beforeDestroy | componentWillUnmount() | | onUnload |
> | | destroyed | | | |
> | | | | | |
> | 捕获错误 | errorCaptured | static getDerivedStateFromError() | onError | |
> | | | componentDidCatch() | | |