1、Vue 3 生命周期钩子介绍
- onMounted()//注册一个回调函数，在组件挂载完成后执行。
- onUpdated()//注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。
- onUnmounted()//注册一个回调函数，在组件实例被卸载之后调用。
- onBeforeMount()//注册一个钩子，在组件被挂载之前被调用。
- onBeforeUpdate()//注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
- onBeforeUnmount()//注册一个钩子，在组件实例被卸载之前调用。
- onErrorCaptured()//注册一个钩子，在捕获了后代组件传递的错误时调用。
- onRenderTracked()//注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用，仅在开发模式下可用，且在服务器端渲染期间不会被调用。
- onRenderTriggered()//注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用，仅在开发模式下可用，且在服务器端渲染期间不会被调用。
- onActivated()//注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用，在服务器端渲染期间不会被调用。
- onDeactivated()//注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用，在服务器端渲染期间不会被调用。
- onServerPrefetch()//注册一个异步函数，在组件实例在服务器上被渲染之前调用。
2、Vue生命周期钩子在UniApp 支持情况
| 生命周期钩子 | 描述 | H5 | App端 | 微信小程序 |
|---|---|---|---|---|
| beforeCreate | 在实例初始化之后，数据观测(data observer)和 event/watcher 事件配置之前被调用。详情 | √ | √ | √ |
| created | 在实例创建完成后被立即调用。详情 | √ | √ | √ |
| beforeMount | 在挂载开始之前被调用：相关的 render 函数首次被调用。详情 | √ | √ | √ |
| mounted | 实例被挂载后调用，这时 Vue.createApp({}).mount() 被新创建的 vm.$el 替换了。详情 | √ | √ | √ |
| beforeUpdate | 数据更新时调用，发生在虚拟 DOM 打补丁之前。详情 | √ | √ | √ |
| updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详情 | √ | √ | √ |
| activated | 被 keep-alive 缓存的组件激活时调用。详情 | √ | √ | x |
| deactivated | 被 keep-alive 缓存的组件停用时调用。详情 | √ | √ | x |
| beforeUnmount | 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。详情 | √ | √ | √ |
| unmounted | 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。详情 | √ | √ | √ |
| errorCaptured | 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。详情 | √ | √ | √ |
| renderTracked | 跟踪虚拟 DOM 重新渲染时调用。钩子接收 debugger event 作为参数。此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。详情 | √ | √ | √ |
| renderTriggered | 当虚拟 DOM 重新渲染为 triggered.Similarly 为renderTracked，接收 debugger event 作为参数。此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。详情 | √ | √ | √ |
3、Vue2 页面及组件生命周期流程图（UniApp）
4、Vue3 页面及组件生命周期流程图（UniApp）
5、总结
以前我们在学习js时，没有什么生命周期一说，从Vue一出，有了生命周期一说，这类似安卓App生命周期，有了生命周期，才知道App运行流程是怎么样的，才知道在对应的周期里运行对应的东西，UniApp的生命周期分为应用生命周期，页面生命周期，对于App开发来说，生命周期很重要，一定得牢记。
