uni-app 页面多次跳转，内存泄露

在 uni-app 开发中，页面多次跳转可能会导致内存泄露，尤其是在页面组件没有正确销毁的情况下。以下是一些常见的原因和解决方案，帮助你避免内存泄露问题：

1. 页面组件未正确销毁

• 原因：在 uni-app 中，页面跳转时，如果页面组件没有正确销毁，可能会导致内存泄露。

• 解决方案：

  • 确保在页面生命周期中正确释放资源。
  • 在 onUnload 生命周期钩子中清理定时器、事件监听器等。

  export default {
    data() {
      return {
        timer: null
      };
    },
    onLoad() {
      this.timer = setInterval(() => {
        console.log('Timer running');
      }, 1000);
    },
    onUnload() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    }
  };

2. 全局事件监听未移除

• 原因：在页面中注册了全局事件监听器（如 uni.$on），但未在页面销毁时移除。

• 解决方案：

  • 在 onUnload 中移除事件监听器。

  export default {
    onLoad() {
      uni.$on('customEvent', this.handleEvent);
    },
    onUnload() {
      uni.$off('customEvent', this.handleEvent);
    },
    methods: {
      handleEvent() {
        console.log('Event triggered');
      }
    }
  };

3. 页面缓存导致内存泄露

• 原因：uni-app 默认会缓存页面，如果页面中持有大量数据或资源，可能会导致内存泄露。

• 解决方案：

  • 在 pages.json 中配置页面不缓存。

  {
    "pages": [
      {
        "path": "pages/index/index",
        "style": {
          "navigationBarTitleText": "首页",
          "enablePullDownRefresh": false,
          "disableScroll": false,
          "onReachBottomDistance": 50,
          "app-plus": {
            "bounce": "none",
            "titleNView": false,
            "scrollIndicator": "none",
            "popGesture": "none",
            "animationType": "none",
            "animationDuration": 0,
            "softinputMode": "adjustResize",
            "render": "always"
          }
        }
      }
    ]
  }

  或者通过代码动态设置页面不缓存：

  uni.navigateTo({
    url: '/pages/index/index',
    success: () => {
      uni.setStorageSync('pageCache', false);
    }
  });

4. 大量数据未释放

• 原因：页面中加载了大量数据（如图片、视频等），但未在页面销毁时释放。

• 解决方案：

  • 在 onUnload 中手动释放数据。

  export default {
    data() {
      return {
        images: []
      };
    },
    onLoad() {
      this.images = this.loadImages();
    },
    onUnload() {
      this.images = null; // 释放数据
    },
    methods: {
      loadImages() {
        // 加载图片数据
        return ['image1', 'image2', 'image3'];
      }
    }
  };

5. 组件未正确销毁

• 原因：页面中使用了自定义组件，但组件内部未正确释放资源。

• 解决方案：

  • 在自定义组件的 beforeDestroy 或 destroyed 生命周期中释放资源。

  export default {
    beforeDestroy() {
      // 释放资源
    }
  };

6. 使用 uni.navigateBack 时未清理数据

• 原因：使用 uni.navigateBack 返回上一页时，上一页的数据可能未清理。

• 解决方案：

  • 在返回页面时，通过 onShow 或 onHide 生命周期钩子清理数据。

  export default {
    onShow() {
      // 重新初始化数据
    },
    onHide() {
      // 清理数据
    }
  };

7. 使用 uni.reLaunch 或 uni.redirectTo 时未清理数据

• 原因：uni.reLaunch 和 uni.redirectTo 会关闭当前页面，但页面数据可能未清理。

• 解决方案：

  • 在跳转前手动清理数据。

  uni.redirectTo({
    url: '/pages/index/index',
    success: () => {
      // 清理数据
    }
  });

8. 使用 uni.createSelectorQuery 未释放

• 原因：uni.createSelectorQuery 创建的查询对象未释放。

• 解决方案：

  • 在页面销毁时手动释放查询对象。

  export default {
    onUnload() {
      this.query = null; // 释放查询对象
    }
  };

9. 使用 uni.createAnimation 未释放

• 原因：uni.createAnimation 创建的动画对象未释放。

• 解决方案：

  • 在页面销毁时手动释放动画对象。

  export default {
    onUnload() {
      this.animation = null; // 释放动画对象
    }
  };

10. 使用 uni.createInnerAudioContext 未释放

• 原因：uni.createInnerAudioContext 创建的音频对象未释放。

• 解决方案：

  • 在页面销毁时手动释放音频对象。

  export default {
    onUnload() {
      this.audioContext.destroy(); // 释放音频对象
    }
  };