uni-app nvue页面 view内存泄露问题

uni-app nvue页面 view内存泄露问题

开发环境 版本号 项目创建方式
Windows 11 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：window 11

HBuilderX类型：正式

HBuilderX版本号：4.57

手机系统：Android

手机系统版本号：Android 12

手机厂商：三星

手机机型：S21

页面类型：nvue

vue版本：vue3

打包方式：云端


### 示例代码：

```html
<template>  
    <view>  
        <button @click="show = !show"> show</button>  

        <view v-if="show">  
            <view v-for="item in 1000">  
                <text>{{item}}</text>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                show:true  
            }  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  

</style>

操作步骤：

反复点击button按钮

预期结果：

app的内存顺着显示隐藏会上升和下落

实际结果：

app的内存占用一直攀升不见下降

bug描述：

通过不断的v-if 显隐view模块，发现app的内存占用一直攀升不见降落，adb shell 进入app 查看 Views的数量一直增加不会下降。


更多关于uni-app nvue页面 view内存泄露问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

view没有做优化吧 可以去插件市场找一下虚拟列表插件来代替 或者用list组件 有不可见部分的渲染资源回收有特殊的优化处理 参考文档：https://uniapp.dcloud.net.cn/component/list.html#list

更多关于uni-app nvue页面 view内存泄露问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我实际的代码中就是用了list组件去做的，我发现了这个问题才用最简单的demo复现

这是一个典型的nvue页面内存泄漏问题。在nvue中使用v-if频繁切换包含大量子元素的view时，Android原生视图没有被正确回收。

主要原因：

  1. nvue的view组件对应的是原生Android的View对象
  2. 在快速切换时，原生View的回收机制可能没有及时触发

解决方案：

  1. 使用v-show替代v-if（推荐）
<view v-show="show">
    <view v-for="item in 1000">
        <text>{{item}}</text>
    </view>
</view>
  1. 如果必须使用v-if，可以尝试在隐藏时手动触发回收：
import { nextTick } from 'vue'
methods: {
    toggle() {
        this.show = !this.show
        if(!this.show) {
            nextTick(() => {
                // 强制触发回收
                this.$forceUpdate()
            })
        }
    }
}
回到顶部