小程序的onShow生命周期的探讨

场景：
首次进入请求列表，返回该页面也会实时监听并请求列表数据
应用到的技术uniapp里的onShow()生命周期
在首次用mounted()请求，然后对其做了第一次进入判断，后续返回的话都在onShow()生命周期里进行，在网页端h5打开，请求是没有问题的，但在app端打开，发现后续修改查询条件，请求回来的数据都是上一次的查询条件的数据。
附代码：

这边主要踩了两个坑，第一是列表数组的深浅拷贝问题----需要手动给数组清空
第二是onShow()在移动端会不受监听改变查询条件的refresh,代码如下

根据你的描述，问题可能是由于 onShow() 生命周期在小程序中的不同行为导致的。

在 Uni-app 中，onShow() 生命周期会在页面显示时触发。但是需要注意，在小程序和 H5 环境下，onShow() 的行为可能有所不同。

对于首次进入页面请求列表数据这种场景，你可以尝试以下方案来解决问题：

1. 使用 onLoad() 生命周期：
   在首次进入页面时使用 onLoad() 生命周期函数进行请求列表数据，并将结果存储到 data 中。

2. 利用全局变量或 Vuex 存储数据：
   首次进入后获取到的列表数据可以保存到全局变量（如 App.vue）或 Vuex 中。然后再通过 onShow() 生命周期函数去读取这些存储的数据。这样无论从哪个环境返回该页面都能保持最新状态。

3. 监听路由跳转事件：
   在每次路由跳转前添加一个监听事件，在切换回该页面时手动触发函数来重新请求最新列表数据。

以上方法仅供参考，请根据具体情况选择适合你项目需求的方式来处理。同时也建议查阅 Uni-app 官方文档以了解更多关于生命周期和异步操作相关内容。

【以下回答由 GPT 生成】

问题分析: 根据问题的描述，vue.js小程序在app端打开后，当修改查询条件后，请求回来的数据仍然是上一次查询条件的数据。这个问题可能是由于onShow()生命周期函数在app端不会重新执行，导致上一次的查询条件仍然被保留。解决这个问题的思路是在每次进入页面时，都能重新执行请求数据的逻辑。

解决方案: 一种解决方案是利用uniapp提供的页面生命周期函数，通过刷新页面的方式重新执行请求数据的逻辑。

1.在data中增加一个refresh的变量，用于控制是否刷新页面。

<script>
export default {
    data() {
        return {
            refresh: false
        }
    },
    mounted() {
        // 首次进入页面时请求列表数据
        // 在这里判断是否是第一次进入该页面
        // ...
    },
    onShow() {
        // 后续返回页面时判断是否需要刷新页面并请求数据
        if (this.refresh) {
            this.refresh = false; // 重置refresh标志
            this.refreshData();
        }
    },
    methods: {
        refreshData() {
            // 在这里处理修改查询条件并请求数据
            // ...
        }
    }
}
</script>

2.在修改查询条件的地方，将refresh设置为true，并跳转回当前页面。

<script>
export default {
    methods: {
        onChangeQuery() {
            // 在这里处理修改查询条件
            // ...
            this.refresh = true; // 设置refresh为true
            uni.redirectTo({
                url: '/path/to/currentPage' // 跳转回当前页面
            })
        }
    }
}
</script>

这样，在修改查询条件并跳转回当前页面时，页面会重新执行onShow()生命周期函数，重新执行请求数据的逻辑。

总结: 通过在onShow()生命周期函数中判断是否需要刷新页面，并在页面跳转时设置刷新标志，可以解决在app端打开后修改查询条件后数据没有被正确刷新的问题。