浅谈 VUE uni-app 生命周期
本文将详细介绍uni-app的生命周期,对单个页面和整个应用程序的生命周期进行描述并举例说明。
uni-app 页面生命周期
uni-app 页面生命周期是指当页面被创建、显示、更新和销毁时系统所执行的相关方法。下面是uni-app常见的页面生命周期:
created
当页面被创建时调用此方法。在其中可以进行数据初始化或者在页面加载完毕时请求服务端数据。使用示例:
created() {
console.log("页面被创建");
//此处可以进行数据初始化或请求服务端数据等操作
}
onReady
当页面准备显示时调用此方法。在此时页面还没有显示,但是即将显示在屏幕上。使用示例:
onReady() {
console.log("页面准备显示");
//此处可以进行dom操作等操作
}
onShow
当页面显示时调用此方法,可以在此时进行页面的数据刷新等操作。使用示例:
onShow() {
console.log("页面显示");
//此处可以进行页面数据刷新等操作
}
onHide
当页面被隐藏时调用此方法,使用示例:
onHide() {
console.log("页面被隐藏");
//此处可以进行一些清理工作等操作
}
onUnload
当页面被销毁时调用此方法,使用示例:
onUnload() {
console.log("页面被销毁");
//此处可以进行一些清理工作等操作
}
以上是uni-app页面常见的生命周期函数,能够让我们清晰地了解每个阶段需要执行的操作。
uni-app 应用程序生命周期
uni-app 应用程序生命周期是整个uni-app的生命周期,当应用程序启动和关闭时系统会调用相关的方法。下面是uni-app 应用程序常见的生命周期:
onLaunch
当应用程序启动时,调用此方法,可以在此时进行应用程序的初始化等操作。使用示例:
onLaunch() {
console.log("应用程序启动了");
//可以进行一些应用程序的初始化等操作
}
onHide
当应用程序进入后台时调用此方法。使用示例:
onHide() {
console.log("应用程序进入后台了");
//可以进行一些数据的缓存等操作
}
onShow
当应用程序从后台恢复到前台时调用此方法,可以在此时进行一些数据的更新等操作。使用示例:
onShow(options) {
console.log("应用程序从后台恢复到前台了");
//可以进行一些数据的更新等操作
}
onUniNViewMessage
当使用了 nvue + uni-app 时,可以通过调用此方法来处理从 nvue 传回来的消息。使用示例:
onUniNViewMessage(e) {
console.log("收到了从nvue传来的消息:", e);
//可以进行一些页面数据的更新等操作
}
onUnhandledRejection
当普通异步函数或 Promise 中抛出异常并未被处理时,会抛出 unhandledRejection 错误。使用示例:
onUnhandledRejection() {
console.log("捕获了 unhandledRejection 错误");
//可以进行一些错误记录等操作
}
以上是uni-app应用程序常见的生命周期函数,可以让我们更清楚地了解uni-app的整体应用程序运行过程。
示例说明
页面生命周期示例
<template>
<div class="content">{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: "hello world"
}
},
created() {
console.log("页面被创建");
//此处可以进行数据初始化或请求服务端数据等操作
},
onReady() {
console.log("页面准备显示");
//此处可以进行dom操作等操作
},
onShow() {
console.log("页面显示");
//此处可以进行页面数据刷新等操作
},
onHide() {
console.log("页面被隐藏");
//此处可以进行一些清理工作等操作
},
onUnload() {
console.log("页面被销毁");
//此处可以进行一些清理工作等操作
}
}
</script>
应用程序生命周期示例
App({
onLaunch() {
console.log("应用程序启动了");
//可以进行一些应用程序的初始化等操作
},
onHide() {
console.log("应用程序进入后台了");
//可以进行一些数据的缓存等操作
},
onShow(options) {
console.log("应用程序从后台恢复到前台了");
//可以进行一些数据的更新等操作
},
onUniNViewMessage(e) {
console.log("收到了从nvue传来的消息:", e);
//可以进行一些页面数据的更新等操作
},
onUnhandledRejection() {
console.log("捕获了 unhandledRejection 错误");
//可以进行一些错误记录等操作
}
})
以上是uni-app生命周期的详细讲解及示例说明。开发者可以根据需要,合理利用生命周期函数,实现更加丰富的应用程序。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:浅谈VUE uni-app 生命周期 - Python技术站