Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.7k views
in Technique[技术] by (71.8m points)

iview组件select造成内存泄漏

子组件A被页面B调用,由B页面切换路由到C页面时,B中会有800k左右的内存泄漏。目前定位为子组件A中的select组件导致的内存泄漏。

项目背景:
使用VUE+iview开发。
子组件A中有用到select组件。
一开始以为是因为select中的on-change事件在页面切换时没有删除导致的内存泄漏,后来把on-change删掉后,还会有内存泄漏。

子组件A代码:

<template>
    <div>
        时间:
        <i-select v-model="queryLabel" style="width:80px" @on-change="onQueryChanged">
            <i-option v-for="item in queryDatas" :value="item.value">{{item.label}}</i-option>
        </i-select>
        <DatePicker v-model="startDate" type="date" style="width:120px; padding-right: 10px" placeholder="起始日期"></DatePicker>
        <DatePicker v-model="endDate" type="date" style="width:120px; padding-right: 10px" placeholder="结束日期" v-if="endDateVisible"></DatePicker>
        <Button type="primary" shape="circle" icon="ios-search" @click="onQueryClick()"></Button>
    </div>
</template>
<script>
import { toDateString } from '@/libs/util'

export default {
    name: 'QueryRadios',
    data() {
        return {
            queryLabel: 1,
            queryDatas: [{ label: '本天', value: 1 }, { label: '本周', value: 2 }, { label: '本月', value: 3 }, { label: '本季', value: 5 }, { label: '本年', value: 6 }, { label: '时间段', value: 4 }],
            queryId: null,
            startDate: new Date(),
            endDate: new Date(),
            endDateVisible: false
        }
    },
    mounted() {
        //默认选择电表
        this.queryLabel = this.queryDatas[0].label;
        this.queryId = this.queryDatas[0].value;
    },

    methods: {
        clean(){
            this.startDate = null;
            this.endDate = null;
            this.queryLabel = null;
            this.$on('on-change', null);
            this.$on('click', null);
            this.queryDatas.splice(0, this.queryDatas.length);
            
        },
        //系统选择改变
        onQueryChanged(label) {
            this.queryId = label;
            //获得当前选择系统
            for (var i = 0; i < this.queryDatas.length; i++) {
                if (label === this.queryDatas[i].label) {
                    this.queryId = this.queryDatas[i].value;
                    break;
                }
            }
            //如果是时间选择,结束框显示
            this.endDateVisible = (4 === this.queryId);
        },
        //执行查询
        onQueryClick() {
            //获得时间信息
            var timeInfos = this.getTimeInfos();
            this.$emit('on-query-changed', timeInfos);
        },
        //获得时间信息
        getTimeInfos() {
            //获得时间信息
            var timeInfos = {
                queryType: this.queryId,
            };
            if (null == this.startDate || "" == this.startDate) {
                timeInfos.startTime = null
            } else {
                timeInfos.startTime = toDateString(this.startDate);
            }
            if (4 === this.queryId) {
                if (null == this.endDate || "" == this.endDate) {
                    timeInfos.endTime = toDateString(new Date());
                } else {
                    timeInfos.endTime = toDateString(this.endDate);
                }
            }
            return timeInfos;
        }
    }
}

</script>

页面B中代码较多,现贴部分主要代码:

<template>
    <div>
        <Card bordered>
            <QueryRadios ref="queryRadios" style="float: right; " @on-query-changed="onQueryClick"> </QueryRadios>
            </Card>
    </div>
</template>
<script>
import QueryRadios from '_vc/query-radios'
export default {
    name: 'home',
    components: {
        QueryRadios
    },
    data(){},
    mounted(){
        let self = this;
        //设置尺寸
        self.chartHeight = (getRealSize(window.innerHeight) - 240);
        //界面改变
        window.onresize = () => {
            self.chartHeight = (getRealSize(window.innerHeight) - 240);
            let chart = echarts.getInstanceByDom(document.getElementById('myChart1'));
            chart.resize();

        }
        //执行查询
        this.rankNo = 1;
        this.onQueryClick();
    },
    methods:{
        
        onQueryClick() {
            let timeInfosBean = this.$refs.queryRadios.getTimeInfos();
            if (null == timeInfosBean.startTime) {
                this.$Message.info('开始时间不能为空');
                return
            }
        },
    }
}
</script>

上边运行完由B页面切路由到C页面时,应该是将子组件A销毁的。但A中有800k的内存没有被清。如果将select注掉,就会将内存释放掉。寻求大佬给看下。

chrome devtools截图:
image


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

可以看一下报错信息吗?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...