子组件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截图:
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…