最全的uniapp生命周期梳理

有没有想我一样的小伙伴，uniapp的项目也做了几个了，但当面试官问起uniapp的生命周期时，却想不出来要说啥，今天我就带大家一起梳理下：

一，应用的生命周期

        应用生命周期是指uniapp应用程序从启动到关闭的整个过程，包括应用程序的启动、前后台切换、退出等。

        uniapp应用程序中App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是应用入口文件。但App.vue本身不是页面，这里不能编写视图元素，也就是没有<template>。uni-app js引擎版是app.vue。uni-app x是app.uvue。

        这个文件的作用包括：监听应用生命周期、配置全局样式、配置全局的存储globalData应用生命周期仅可在App.vue中监听，在页面监听无效。

以下就是uniapp应用的生命周期（主要的，其他的不常用，也有兼容性问题）：

• onLaunch：应用程序启动时触发，仅在应用程序第一次启动时触发。
• onShow：应用程序启动或从后台进入前台时触发，可以获取到应用程序被打开的方式和场景值。
• onHide：应用程序进入后台时触发。
• onError：应用程序发生错误时触发，可以用来捕获和处理错误信息。
• onUniNViewMessage：监听来自nvue页面的消息。

二、页面的生命周期

        1，页面生命周期介绍

        页面生命周期是指页面从创建到销毁的整个过程，包括页面的创建、显示、隐藏和销毁等。Uniapp提供了以下生命周期钩子函数：

• onInit：监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad。
• onLoad：页面被加载时触发，监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）可以进行数据初始化和网络请求等操作。
• onReady：页面渲染完成时触发，可以进行页面动画和交互等操作，监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发。
• onShow：页面被展示时触发，页面每次出现在屏幕上都触发，。
• onHide：页面被隐藏时触发。
• onUnload：页面被销毁时触发，可以进行资源释放和清理等操作。

Vue2 页面及组件生命周期流程图

Vue3 页面及组件生命周期流程图

2，页面加载时序介绍

接下来我们介绍onLoad、onReady、onShow的先后关系，页面加载的详细流程。

1. uni-app框架，首先根据pages.json的配置，创建页面

所以原生导航栏是最快显示的。页面背景色也应该在这里配置。

1. 根据页面template里的组件，创建dom。

这里的dom创建仅包含第一批处理的静态dom。对于通过js/uts更新data然后通过v-for再创建的列表数据，不在第一批处理。

要注意一个页面静态dom元素过多，会影响页面加载速度。在uni-app x Android版本上，可能会阻碍页面进入的转场动画。 因为此时，页面转场动画还没有启动。

1. 触发onLoad

此时页面还未显示，没有开始进入的转场动画，页面dom还不存在。

所以这里不能直接操作dom（可以修改data，因为vue框架会等待dom准备后再更新界面）；

onLoad比较适合的操作是：接受上页的参数，联网取数据，更新data。

手机都是多核的，uni.request或云开发联网，在子线程运行，不会干扰UI线程的入场动画，并行处理可以更快的拿到数据、渲染界面。

但onLoad里不适合进行大量同步耗时运算，因为此时转场动画还没开始。

1. 转场动画开始

新页面开始进入的转场动画，动画默认耗时300ms，可以在路由API中调节时长。

1. 页面onReady

第2步创建dom是虚拟dom，dom创建后需要经历一段时间，UI层才能完成了页面上真实元素的创建，即触发了onReady。

onReady后，页面元素就可以自由操作了，比如ref获取节点。同时首批界面也渲染了。

注意：onReady和转场动画开始、结束之间，没有必然的先后顺序，完全取决于dom的数量和复杂度。

如果元素排版和渲染够快，转场动画刚开始就渲染好了；

大多情况下，转场动画走几格就看到了首批渲染内容；

如果元素排版和渲染过慢，转场动画结束都没有内容，就会造成白屏。

联网进程从onLoad起就在异步获取数据更新data，如果服务器速度够快，第二批数据也可能在转场动画结束前渲染。

1. 转场动画结束

再次强调，5和6的先后顺序不一定，取决于首批dom渲染的速度。

3，页面加载常见问题

了解了页面加载时序原理，我们就知道如何避免页面加载常见的问题：

• 优化白屏的方法：

1. 页面dom太多，注意有的组件写的不好，会拖累整体页面。uni-app x 里减少dom数量的策略，详见
2. 联网不要在onReady里，那样太慢了，在onLoad里早点联网
3. 在pages.json里配置原生导航栏和背景色
4. 有的页面template内容非常少，整页就是一个需要联网加载的列表，这会造成虽然首批dom飞快渲染了，但页面其实还是白的，联网后才能显示字和图。 此时需要在template里做一些简单占位组件，比如loading组件、骨架屏，让本地先显示一些内容。

• 卡住动画不启动的原因：

1. 页面dom太多，注意有的组件写的不好，会拖累整体页面。uni-app x 里减少dom数量的策略，详见
2. onLoad里执行了耗时的同步计算

4，onShow和onHide

注意页面显示，是一个会重复触发的事件。

a页面刚进入时，会触发a页面的onShow。

当a跳转到b页面时，a会触发onHide，而b会触发onShow。

但当b被关闭时，b会触发onUnload，此时a再次显示出现，会再次触发onShow。

在tabbar页面（指pages.json里配置的tabbar），不同tab页面互相切换时，会触发各自的onShow和onHide。

三、组件的生命周期

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

beforeCreate：组件实例被创建之前触发，此时组件的数据和方法都还没有初始化。
created：组件实例被创建之后触发，此时组件的数据和方法已经初始化。
beforeMount：组件被渲染之前触发，此时组件还没有被渲染到页面上。
mounted：组件被渲染之后触发，此时组件已经被渲染到页面上。
beforeUpdate：组件数据更新之前触发，此时组件的数据还没有被更新。
updated：组件数据更新之后触发，此时组件的数据已经被更新。
beforeDestroy：组件实例被销毁之前触发，此时组件的数据和方法还可以访问。
destroyed：组件实例被销毁之后触发，此时组件的数据和方法已经无法访问。