在uni-app中,组件生命周期分为两部分:页面生命周期和应用生命周期。页面生命周期用于控制页面的生命周期事件,而应用生命周期用于控制整个应用的生命周期事件。
页面生命周期:
-
onLoad:页面加载时触发,可以在这个生命周期里进行初始化数据操作。
-
onShow:页面显示时触发,每次页面展示都会触发,比如从其他页面返回到该页面时。
-
onReady:页面初次渲染完成时触发,可以在这个生命周期里访问页面节点。
-
onHide:页面隐藏时触发,比如跳转到其他页面或者切入后台时触发。
-
onUnload:页面卸载时触发,比如页面被销毁时触发,可以在这个生命周期里进行一些清理操作。
应用生命周期:
-
onLaunch:应用初始化时触发,只触发一次,在应用生命周期内只有一个实例。
-
onShow:应用启动或从后台进入前台时触发,可以在这个生命周期里做一些应用激活时的操作。
-
onHide:应用从前台进入后台时触发,可以在这个生命周期里做一些应用进入后台时的操作。
-
onError:应用发生错误时触发,可以在这个生命周期里进行错误处理。
需要注意的是,uni-app的生命周期函数名称和小程序的生命周期函数名称大致相同,但具体的触发时机和用法可能有所区别。另外,uni-app还提供了扩展的生命周期函数如onPullDownRefresh、onReachBottom、onResize等等,可以根据实际需求进行使用。
页面生命周期函数的使用:
- 在页面的vue文件中,直接编写对应的生命周期函数即可。例如,在页面的vue文件里添加以下代码:
export default {
onLoad() {
console.log('页面加载');
},
onShow() {
console.log('页面显示');
},
onReady() {
console.log('页面初次渲染完成');
},
onHide() {
console.log('页面隐藏');
},
onUnload() {
console.log('页面卸载');
},
}
- 在对应的生命周期函数中编写你所需的逻辑代码。例如,在onLoad生命周期函数里进行初始化数据操作,如调用接口获取数据。
应用生命周期函数的使用:
- 在
App.vue
文件中,直接编写对应的应用生命周期函数即可。例如,在App.vue
中添加以下代码:
export default {
onLaunch() {
console.log('应用初始化');
},
onShow() {
console.log('应用显示');
},
onHide() {
console.log('应用隐藏');
},
onError(err) {
console.log('应用错误', err);
},
}
- 在对应的应用生命周期函数中编写你所需的逻辑代码。例如,在onLaunch生命周期函数里进行应用初始化操作,如获取用户信息、打开数据库连接等。