uni-app返回上一级，页面不刷新，bug

最新推荐文章于 2024-08-18 16:07:34 发布

好多达不溜

最新推荐文章于 2024-08-18 16:07:34 发布

阅读量3k

点赞数

分类专栏： uniapp 文章标签： bug vue.js 前端

原文链接：http://t.zoukankan.com/guwufeiyang-p-14944716.html

版权

uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了uniapp中页面生命周期的onLoad和onShow两个关键方法的区别。onLoad只在页面首次加载时触发，适合获取参数和一次性数据请求；而onShow每次页面显示时都会触发，适用于实时刷新数据的场景。根据页面内容是否需要频繁更新，开发者应合理选择使用onLoad或onShow以优化用户体验。

摘要由CSDN通过智能技术生成

uniapp 生命周期(onLoad跟onLoadonShow的区别)

一、uniapp生命周期分两种 :

1、应用生命周期：仅可在App.vue中监听，在其它页面监听无效。

2、页面生命周期：仅在page页面中监听，而单独封装的组件中【页面周期无效】，但是Vue的生命周期依然有效【Vue的生命周期在任何地方都是有效的】

二、页面生命周期

1、页面的加载过程是：加载-显示-加载完成-页面隐藏-页面卸载

2、页面生命周期的出发过程： onLoad:监听页面加载 =》 onShow:监听页面显示 =》 onReady:监听页面初次渲染完成 =》 onHide:监听页面隐藏 =》 onUnload:监听页面卸载

3、onLoad跟onLoadonShow的区别

     (1)onShow: 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面

      例如：页面b:通过缓存跳转到页面a

      页面B:缓存一个变量newMember   uni.setStorageSync('newMember', this.newMember)

      页面A可以接受这个参数变量:onShow() { let str = uni.getStorageSync('newMember') },

     (2) onLoad:只加载一次，监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）

         只加载一次 所以如果b页面不断的修改数据 再通过 onLoad(){  uni.navigateBack({delta: 1,})   回到A页面 a页面的数据不会随之改变

总结：A页面跳转到B页面后，从二级页面B返回该页面A时，onLoad不会再次加载，而onshow会重新加载。

应用选择：

         1.如果加载列表页，二级页面对一级的列表页面内容有修改，则以及列表函数应该在onShow中加载，否则可以选择onLoad。

        2.如果从一个页面携带参数跳转到另外一个页面，在另一个页面获取参数的方式： onLoad(options){ console.log(options.xxx) },这些参数都挂在在options.

        3.在一些数据变化较少的时候我们用onload

       4：像这些order订单列表数据变化及时性我们用的是onshow;

onLoad先于onShow执行
onLoad页面的整个生命周期里，只执行一次
onShow页面的整个生命周期里，可执行多次，即每次显示都会执行
获取参数并且只请求一次的事件放在 onLoad 里。
当前页面需要时时刷数据的请求多次的事件放在 onShow 里。