Table component has a memory leak problem #3786
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
2.0.1
Environment
Mac OS 11.2.3 , Chrome 88.0.4324.192, Vue 3.0.7, Ant Design Vue 2.0.1
Reproduction link
Steps to reproduce
<template>
<div><a-button @click="writeData">写数据</a-button></div>
<a-table
:row-key="(record) => record.id"
:data-source="tableData"
:columns="columns"
size="small"
:pagination="false"
/>
</template>
<script>
import {ref} from 'vue';
export default {
setup() {
let id = 73665523367936;
let tableData = ref();
const writeData = () => {
let a = [];
for (let i = 1; i <= 10; i++) {
id++;
a.push({id: id, name: '姓名' + id});
}
tableData.value = a;
};
// 定义表格标头
const columns = [
{
title: 'ID',
dataIndex: 'id'
},
{
title: 'Name',
dataIndex: 'name'
}
];
return {
columns,
tableData,
writeData
};
}
};
</script>
What is expected?
表格的数据源变化时内存不要一直上升，看上去像是内存泄漏
What is actually happening?
在chrome的开发者工具的性能面板里，点开始录制，然后点页面上的“写数据“按钮来更改表格的data-source绑定的变量值，点击击十几次之后停止录制，在性能面板里看到内存一直上升始终不降下来。如果刷新页面才会降下来。
在vue 3.0.0上这种内存泄漏会造成轻微卡顿，在vue 3.0.7上卡顿问题明显改善，但内存泄漏问题还是存在。