什么是生命周期?
首先，在Vue中每个实例都会经历一系列的初始化步骤。
当它被创建时，从设置数据到编译模板，再到将实例挂载到DOM，最后在数据变化时更新DOM。这个过程被称为Vue实例的生命周期，它们在经历这个创建和更新DOM的过程中，默认有一些函数在里面运行。正是在它们内部，Vue组件被创建并存在，这些功能被称为生命周期钩子。
生命周期英文为 Lifecycle 这个概念不止应用于vue、react 等等前端技术之中，当然了，在 uni-app 中同样存在，就像是人的一生，从出生到释然，对应到代码中，一个对象从创建、运行、销毁的这个过程被称为生命周期。
环境准备
我们使用官方的 HBuilderX 进行开发
我们新建一个项目
选择 uni-app，我们选择默认模版创建就好
uni-app 生命周期
应用生命周期
App.vue 内定义了应用的 Lifecycle Hooks ： 应用生命周期钩子函数，我们简单说的就是 应用生命周期。
应用生命周期是用来控制整个应用全局的生命周期，监听应用的初始化、启动、退出等状态的。
uni-app 支持如下应用生命周期：
-
onLaunch ：初始化完成时触发（全局只触发一次）。通常用来初始化前置数据，比如获取用户信息。
-
onShow ：启动或从后台转入前台显示。例如将这个app放到了后台，现在又从后台中进入。可以用于第二次打开页面需要刷新数据的情况下。
-
onHide ：从前台进入后台。例如使用app时返回桌面，这个app将会放到后台这时候就会触发。可以由于清除缓存或者保护隐私的情况下使用。
上面的更常用，但下面的也很重要 -
onError ：报错时触发。
-
onUniNViewMessage ：对
nvue页面发送的数据进行监听。 -
onUnhandledRejection ：对未处理的
Promise拒绝事件监听函数。 -
onPageNotFound ：页面不存在时的监听函数。
-
onThemeChange ：监听系统主题变化。如果你想为应用适配一个暗色主题，就可以在这个函数中监听系统主题变化然后切换对应的程序主题。
这里比较需要注意的就是 onLaunch， onLaunch hooks 在 uni-app 只在全局初始化完成时触发一次；onShow 第一次触发时 Vue 的数据还没有加载完，在代码中来看就是比 Vue 组件生命周期中的 mounted 要更早触发，并且此时 data、DOM 也没有加载。
因为这里为 应用生命周期 所以我们在 App.vue 内编写内容。（此处仅为示例，并不代表实际应用场景）
<script>
export default {
data() {
return {
latest_data_timer: 0,
stop_time: 0,
};
},
methods: {
// 假设这是某些信息的 API
getNowUserInfo() {
return {
user: "我想养只猫",
webSite: "uiuing.com",
token: "123abclkd",
};
},
// 假设通过这个方法一直在加载数据
latestData() {
this.latest_data_timer = setInterval(() => {
console.log("Now user info：", this.getNowUserInfo());
}, 2000);
},
},
onLaunch: function () {
console.log("欢迎您的使用，我只加载一次～");
},
onShow: function () {
console.log("开始加载数据，注意此时vue数据没加载完");
// 告知数据暂停了多久
if (this.stop_time) {
let load_interval_time = new Date().getTime() - this.stop_time;
console.log("数据暂停了：", load_interval_time / 1000, "秒");
}
// 开始加载
this.latestData();
},
onHide: function () {
console.log("检测到App在后台，暂停内容加载");
// 记录暂停时的时间戳
this.stop_time = new Date().getTime();
// 暂停加载
clearInterval(this.latest_data_timer);
},
};
</script>
页面生命周期
页面生命周期 即：单个页面的生命周期，监听页面加载、页面显示、页面渲染、隐藏、卸载等状态。
页面生命周期 常用 onLoad :第一次加载时执行，只执行一次，一般用于上一级点击进入下一级，需要传参数时使用。 onShow : 页面第一次加载时会执行，从二级页面回来时也会触发。
uni-app 中常用的页面生命周期钩子函数如下：
-
onLoad ：监听页面加载，其参数为上个页面传递的数据，参数类型为 Object。
-
onShow ：监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面。
-
onReady ：监听页面初次渲染完成。
-
onHide ：监听页面隐藏。
-
onUnload ：监听页面卸载。
-
onPullDownRefresh ：监听用户下拉动作，一般用于下拉刷新。
因为这里为 页面生命周期 所以我们建立一个 page /pages/Home/index.vue 到这里编写内容。
<template>
<view></view>
</template>
<script>
export default {
onReady() {
console.log("页面初次渲染完成");
},
onLoad() {
console.log("页面加载动作");
},
onShow() {
console.log("页面显示动作");
},
onHide() {
console.log("页面隐藏动作");
},
onUnload() {
console.log("页面关闭动作");
},
onPageScroll() {
console.log("页面滚动动作");
},
};
</script>
<style></style>
对于 onPullDownRefresh 需要这样使用：
（此处仅为示例，并不代表实际应用场景）
需要在 pages.json 里, 在style选项中开启 enablePullDownRefresh.
- uni.startPullDownRefresh() : 开始当前页面的下拉刷新.
- uni.stopPullDownRefresh() : 停止当前页面的下拉刷新.
"pages": [
{
"style": {
"enablePullDownRefresh": true // 添加
}
}
],
onShow() {
// 开始下拉
uni.startPullDownRefresh();
},
onPullDownRefresh() {
// 4秒后关闭下拉
setTimeout(function () {
uni.stopPullDownRefresh();
}, 4000);
}
还有一个组件生命周期，也就是 Vue 的生命周期，这里就不重复了