阿震
阿震
  • 发布:2022-09-09 16:33
  • 更新:2022-09-09 17:11
  • 阅读:519

【报Bug】uni cli vue3(ts) 开发的小程序,页面关闭后,uni.request 回调中的 watch 没有销毁。

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 11

手机系统: Android

手机系统版本号: Android 12

手机厂商: 华为

手机机型: P30

页面类型: vue

vue版本: vue3

打包方式: 离线

项目创建方式: CLI

CLI版本号: 3.0.0-alpha-3060120220907002

示例代码:

App.vue:

import { init } from './libs/global';  
onLaunch((options) => {  
    init();  
});

libs/global.ts:

import { ref } from "vue";  
export const $testValue = ref(0);  
export function init() {  
    setInterval(()=>{  
        $testValue.value = new Date().getTime();  
    },1000);  
}

pages/test/test.vue:

<script setup lang="ts">  
import { onUnmounted,  watch } from 'vue';  
import { onLoad, onUnload } from '@dcloudio/uni-app';  
import { $testValue } from '../../libs/global';  

const pageId = new Date().getTime();  

let loadData = ()=>{  
    uni.request({  
        url: `https://dev.92gyw.com/app/home/index`,  
        method: 'POST',  
        success(resp) {  
             // 不会销毁的 watch,单独写成 function 也是一个样子  
             watch(() => $testValue.value, (n) => {  
                console.log(`page: ${pageId}  testValue change:${n} `);  
                // 这里如果有 数据请求的话,页面打开多次后,后果很严重  
             });  
        }  
    });  
};  

onLoad(()=>{  
    console.log(`page: ${pageId}  loaded ...`);  
    loadData ();  
});  

onUnload(()=>{  
    console.log(`page: ${pageId}  unload !`);  
});  

onUnmounted(()=>{  
    console.log(`page: ${pageId}  unmounted !`);  
});  
</script>

操作步骤:

百度小程序、微信小程序的开发者工具和真机均有此BUG。

1、小程序中,准备一个全局变量,让这个变量每秒改变1次。
2、准备一个测试页面,代码中记录下页面打开的时间戳, 在页面的 uni.request 的 success 回调中 watch 这个变量。变量改变时,输出页面的打开这个页面的时间戳和这个变量。
3、在小程序中反复的打开和关闭页面,就可以看见watch没有被销毁。

预期结果:

第一次打开测试页面,输出:

page: 1662711994264 loaded ...  
page: 1662711994264 testValue change 1662711995264  
page: 1662711994264 testValue change 1662711996264

关闭测试页面后输出:

page: 1662711994264 34 unload  
page: 1662711994264 unmounted 

然后无任何输出,等待几秒,第二次打开测试页面;

第二次打开页面输出:

page: 1662712009675 loaded ...  
page: 1662712009675 testValue change 1662712009675  
page: 1662712009675 testValue change 1662712010675

关闭测试页面后输出:


page: 1662712009675 unload  
page: 1662712009675 unmounted   

然后无任何输出  

实际结果:

第一次打开测试页面,控制台输出:

page: 1662711994264 loaded ...  
page: 1662711994264 testValue change 1662711995264   
page: 1662711994264 testValue change 1662711996264 

关闭测试页面后输出:

page: 1662711994264 unload  
page: 1662711994264 unmounted 

等待几秒的时候仍然有输出:

page: 1662711994264 testValue change 1662711997264   
page: 1662711994264 testValue change 1662711998264 

第二次打开页面输出:

page: 1662712009675 loaded ...  
page: 1662711994264 testValue change 1662712009675  
page: 1662712009675 testValue change 1662712009675  
page: 1662711994264 testValue change 1662712010675  
page: 1662712009675 testValue change 1662712010675

关闭测试页面后输出:

page: 1662712009675 unload  
page: 1662712009675 unmounted 

然后仍然有输出

page: 1662711994264 testValue change 1662712011675  
page: 1662712009675 testValue change 1662712011675  
page: 1662711994264 testValue change 1662712012675  
page: 1662712009675 testValue change 1662712012675

bug描述:

页面已经关闭,uni.request 回调函数中发起的 watch 不会销毁。

2022-09-09 16:33 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

在微信开发者工具测试,未重现,可以提交一个完整的测试工程

  • 阿震 (作者)

    我重新检查发现,原来说的BUG是没有,但是如果是在 uni.request 中进行的 watch 就不会销毁了,麻烦你再看下我修改之后问题代码。这个问题虽然可以通过其它手段解决,但我还是希望 uni 更完美。

    2022-09-09 17:46

  • DCloud_UNI_FXY

    回复 阿震: 非Bug,这是标准的vue特性,在生命周期内同步执行的watch,会与当前组件关联,组件销毁时,会自动销毁该watch,而其他时间创建的watch,需要自行维护生命周期。

    2022-09-09 17:53

  • 阿震 (作者)

    回复 DCloud_UNI_FXY: 好的 谢谢。

    2022-09-09 19:13

阿震

阿震 (作者)

好的,谢谢,我重新部署了一个测试项目,的确未能重现,应该是我项目里还有其它地方的问题导致的,我再检查一下。

要回复问题请先登录注册