uniapp生命周期全解析
我们学习uniapp的时候会学到uniapp的生命周期，uniapp做到了三端适配，但在学uniapp的时候最好有vue和微信小程序的基础，这样理解起来会非常快。uniapp 的生命周期和 vue 的生命周期基本相同，但是在 uniapp中还增加了一些特定的生命周期函数，比如小程序平台和APP平台的生命周期函数。需要注意的是，在 uniapp 中，由于可以同时构建多个平台的应用程序，所以在某些。生
·
我们学习uniapp的时候会学到uniapp的生命周期，uniapp做到了三端适配，但在学uniapp的时候最好有vue和微信小程序的基础，这样理解起来会非常快。
uniapp 的生命周期和 vue 的生命周期基本相同，但是在 uniapp 中还增加了一些特定的生命周期函数，比如小程序平台和APP平台的生命周期函数。
下面是 Uni-app 和 Vue.js 的生命周期函数对比：
| 生命周期函数 | 触发时机 | Uni-app | Vue.js |
|---|---|---|---|
| beforeCreate | 实例刚被创建 | ✔️ | ✔️ |
| created | 实例已经创建完成 | ✔️ | ✔️ |
| beforeMount | 实例即将被挂载到页面上 | ✔️ | ✔️ |
| mounted | 实例已经被挂载到页面上 | ✔️ | ✔️ |
| beforeUpdate | 数据即将被更新 | ✔️ | ✔️ |
| updated | 数据已经被更新 | ✔️ | ✔️ |
| activated | 实例被激活（一般用于 keep-alive 组件） | ✔️（仅在 APP 和小程序平台） | ❌ |
| deactivated | 实例被停用（一般用于 keep-alive 组件） | ✔️（仅在 APP 和小程序平台） | ❌ |
| beforeDestroy | 实例即将被销毁 | ✔️ | ✔️ |
| destroyed | 实例已经被销毁 | ✔️ | ✔️ |
| errorCaptured | 捕获子组件抛出的异常 | ✔️ | ✔️（在组件内部使用，需要使用 Vue.config.errorHandler） |
| onPageNotFound | 当页面不存在时触发（仅在APP和小程序平台） | ✔️（仅在 APP 和小程序平台） | ❌ |
| onShow | 当页面显示时触发（仅在APP和小程序平台） | ✔️（仅在 APP 和小程序平台） | ❌ |
| onHide | 当页面隐藏时触发（仅在APP和小程序平台） | ✔️（仅在 APP 和小程序平台） | ❌ |
| onUniNViewMessage | 当接收到来自 nvue 界面的数据时触发（仅在APP平台） | ✔️（仅在 APP 平台） | ❌ |
需要注意的是，在 uniapp 中，由于可以同时构建多个平台的应用程序，所以在某些特定平台上可能会触发特定的生命周期函数。例如，onShow 和 onHide 生命周期函数只在 APP 和小程序平台上触发，在 H5 平台上是不会触发的。
这里选取一张网上关于vue声明周期的图片帮助大家理解：
将onPageNotFound，onShow，onHide，onUniNViewMessage放在合适的位置即为uniapp完整的声明周期
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)