03uniapp 的生命周期【uniapp 专题 03】

作者：坚果

公众号："大前端之旅"

华为云享专家，InfoQ 签约作者，阿里云专家博主，51CTO 博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括 Flutter,小程序,安卓，VUE，JavaScript。

看过我的安卓，鸿蒙，小程序，或者 Flutter 的都知道，接下来我要说什么，如果不出意外的话，当然是生命周期了，关于生命周期不外语有两个，一个是应用的生命周期，一个是页面的生命周期。

1.应用生命周期

uni-app 支持 onLaunch、onShow、onHide 等应用生命周期函数，

注意

应用生命周期仅可在App.vue中监听，在其它页面监听无效。

• onlaunch 里进行页面跳转，如遇白屏报错，

• 此时需要延迟做跳转处理。

• 由于性能优化，HBuilderX 1.9.8 和 HBuilderX1.9.4 的执行时机有所不同。一些在 HBuilderX 1.9.4 下无需延时的代码，在升级到 HBuilderX 1.9.8 报错。先请延迟处理。

• 在 HBuilderX 1.9.9+版本，已在底层修复此问题，自动兼容冲突，无需开发者再写延时代码。所以在此之前看一下你的 HBuilderX 的版本还是很有必有的。

• onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）

HBuilderX 版本查看，在编辑器的关于哪儿

<script>// 只能在 App.vue 里监听应用的生命周期 export default {onLaunch: function() {console.log('App Launch')},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')}}</script>

2.页面生命周期

uni-app 支持 onLoad、onShow、onReady 等生命周期函数

其实除了应用生命周期和页面生命周期之外，还有的就是组件生命周期，也是有必要了解的。

3.组件生命周期

uni-app 组件支持的生命周期，与 vue 标准组件的生命周期相同。这里没有页面级的 onLoad 等生命周期：

总结

这一节我们了解了应用生命周期和页面生命周期之外，还有的就是组件生命周期，当然，可能官方文档更为齐全，但是我想说的是自己整理过一篇才属于自己，不然只是躺在那儿的冰冷的文字罢了。

参考文档

https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e5%ba%94%e7%94%a8%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f