uni-app 微信小程序页面中自定义组件销毁或卸载页面产生内存泄漏?

发布于 1周前 作者 nodeper 来自 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

Image Image Image Image Image


3 回复

你好,请问解决了吗


目前还没有,只能尽量减少单页面内容

在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. 清除定时器

对于使用setIntervalsetTimeout设置的定时器,需要在组件或页面卸载时清除它们。

// 页面内
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中如何实现这些最佳实践,确保应用的性能和稳定性。

回到顶部