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是没有,但是如果是在 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