uni-app 微信小程序页面中自定义组件销毁或卸载页面产生内存泄漏?
uni-app 微信小程序页面中自定义组件销毁或卸载页面产生内存泄漏?
操作步骤:
小程序单独分享子包页面,当被分享人没有加载过首页打开不会卡顿;若被分享人打开过首页(需要触发卸载页面/销毁组件);加载了首页多个自定义组件后,通过relaunch打开其他非底部导航页面卡顿
在安卓真机会卡顿,苹果真机不会卡顿;
预期结果:
关闭页面时,组件能够销毁释放;relaunch和分享等待this.$vm && this.$vm.$destroy()
时间不要等待很久
实际结果:
加载过首页多个自定义组件后,通过relaunch打开二级页或通过分享打开二级页,需要等待销毁组件完成后才能正常渲染页面
bug描述:
微信小程序首页内有大约30个自定义组件的渲染,组件是通过view标签的v-for循环内部用template标签v-if判断组件的显示;通过relaunch跳转子包页面时,进行页面卸载花费了30多秒,调试查看关闭所有页面打开新页面时,内存中VueComponent没有减少一直在叠加.似乎没有被释放掉.
项目信息 | 详细信息 |
---|---|
产品分类 | uniapp/小程序/微信 |
PC开发环境操作系统 | Windows |
PC开发环境操作系统版本号 | window10 专业版 |
HBuilderX类型 | 正式 |
HBuilderX版本号 | 4.24 |
第三方开发者工具版本号 | Stable 1.06.2405020 |
基础库版本号 | 3.5.1 |
项目创建方式 | HBuilderX |
你好,请问解决了吗
目前还没有,只能尽量减少单页面内容
在uni-app开发微信小程序时,自定义组件的销毁或页面卸载确实可能引发内存泄漏问题,这通常是由于事件监听器未移除、定时器未清除、全局变量或DOM引用未释放等原因导致的。为了有效避免内存泄漏,我们需要在组件或页面卸载时,执行相应的清理工作。以下是一些常见的场景及相应的代码案例,展示如何在uni-app中正确管理资源,防止内存泄漏。
1. 移除事件监听器
在组件或页面中,如果添加了事件监听器,需要在组件销毁或页面卸载时移除它们。
// 组件内
export default {
data() {
return {
// ...
};
},
mounted() {
// 添加事件监听器
uni.$on('someEvent', this.handleEvent);
},
beforeDestroy() {
// 移除事件监听器
uni.$off('someEvent', this.handleEvent);
},
methods: {
handleEvent(event) {
// 处理事件
},
// ...
}
};
2. 清除定时器
对于使用setInterval
或setTimeout
设置的定时器,需要在组件或页面卸载时清除它们。
// 页面内
Page({
data: {
// ...
},
onLoad() {
// 设置定时器
this.timer = setInterval(() => {
// 执行定时任务
}, 1000);
},
onUnload() {
// 清除定时器
clearInterval(this.timer);
this.timer = null;
},
// ...
});
3. 释放全局变量或DOM引用
避免在全局作用域中持有对组件实例或DOM元素的引用,同时在组件或页面卸载时手动置空这些引用。
// 组件内
export default {
data() {
return {
someElement: null,
};
},
mounted() {
// 获取DOM元素引用
this.someElement = uni.createSelectorQuery().select('#someElement').node().exec()[1];
},
beforeDestroy() {
// 释放DOM元素引用
this.someElement = null;
},
// ...
};
总结
内存泄漏问题通常源于资源管理不当,通过在组件或页面的生命周期钩子中正确添加和移除事件监听器、清除定时器、释放全局变量或DOM引用,可以有效避免内存泄漏。以上代码案例展示了在uni-app中如何实现这些最佳实践,确保应用的性能和稳定性。