uniapp 那个生命周期只执行一遍
时间: 2023-12-02 10:40:42 浏览: 29
uniapp中的全局生命周期onLaunch()只会在uni-app初始化时执行一次,其他生命周期可能会被多次执行。具体可以参考以下代码示例:
```vue
<template>
<view>
<text>{{ message }}</text>
</view>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!'
}
},
onLaunch() {
console.log('uni-app 初始化完成')
},
onShow() {
console.log('uni-app 显示')
},
onHide() {
console.log('uni-app 隐藏')
},
onError() {
console.log('uni-app 错误')
},
onUniNViewMessage() {
console.log('nvue 页面发送数据')
}
}
</script>
```
在上述代码中,onLaunch()只会在uni-app初始化完成时执行一次,其他生命周期可能会被多次执行。如果你想验证这一点,可以在控制台中查看输出结果。
相关问题
uniapp在生命周期onShow中执行http请求
在uniapp的生命周期onShow中执行http请求是可行的,但需要注意以下几点:
1. 在onShow中执行http请求可能会影响页面加载速度,因此需要谨慎使用,尽量避免在onShow中执行大量http请求。
2. 在onShow中执行http请求可能会导致多次请求同一数据,因此需要对请求做缓存处理。
3. 在onShow中执行http请求可能会导致页面数据更新不及时,因此需要在请求完成后及时更新页面数据。
以下是一个简单的示例代码:
```
export default {
onShow() {
uni.request({
url: 'https://example.com/api/data',
success: res => {
// 对请求结果做缓存处理
uni.setStorageSync('data', res.data)
// 更新页面数据
this.setData({
data: res.data
})
}
})
}
}
```
在这个示例中,我们在onShow生命周期中执行了一个http请求,并且对请求结果做了缓存处理,使用setData方法及时更新了页面数据。
uniapp生命周期执行顺序
uniapp的生命周期执行顺序如下:
1. beforeCreate:在实例初始化之后,数据观测和事件配置之前被调用。
2. created:在实例创建完成后被调用,此时实例已经完成了数据观测和事件配置。
3. beforeMount:在挂载开始之前被调用,相关的 render 函数首次被调用。
4. mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
5. onShow:页面展示时触发,对应小程序的onShow生命周期。
6. onLoad:页面加载时触发,对应小程序的onLoad生命周期。
7. onReady:页面初次渲染完成时触发,对应小程序的onReady生命周期。
8. beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
9. updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁完成之后调用。
10. onUnLoad:页面卸载时触发,对应小程序的onUnload生命周期。
11. onHide:页面隐藏时触发,对应小程序的onHide生命周期。
以上是uniapp生命周期的执行顺序。\[1\]\[2\]
#### 引用[.reference_title]
- *1* [uni-app中页面生命周期与vue生命周期的执行顺序](https://blog.csdn.net/hu104160112/article/details/116298100)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [uniapp常用生命周期执行顺序](https://blog.csdn.net/front_endxiaobaia/article/details/115480261)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]