Skip to content

Commit 48410ea

Browse files
ChuChenchengChuChencheng
authored
Merge pull request #57 from wsfe/feat/memory-leak-mitigation
feat: memory leak mitigation
2 parents 451512d + 6c6a9ac commit 48410ea

13 files changed

+1885
-2624
lines changed

‎docs/assets/index-20e468a3.js

-1
This file was deleted.

‎docs/assets/index-5adf2eac.js

+15
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/index-4fa026e7.css renamed to ‎docs/assets/index-99615e9a.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
height: 100%;
1919
}
2020
</style>
21-
<script type="module" crossorigin src="./assets/index-20e468a3.js"></script>
22-
<link rel="stylesheet" href="./assets/index-4fa026e7.css">
21+
<script type="module" crossorigin src="./assets/index-5adf2eac.js"></script>
22+
<link rel="stylesheet" href="./assets/index-99615e9a.css">
2323
</head>
2424
<body>
2525
<div id="app"></div>

‎examples/Feature.vue

+26-4
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,24 @@
77
<div class="interface">
88
<div style="height: 300px">
99
<VTree
10+
ref="basicTreeRef"
1011
:data="basicUsage"
1112
:nodeClassName="node => `generated-class-${node.id}`"
1213
/>
1314
</div>
1415
</div>
15-
<div class="desc">纯展示</div>
16+
<div class="desc">
17+
<div>纯展示</div>
18+
<div class="desc-block">
19+
<button @click="handleExpandAll">展开全部节点</button>
20+
<button @click="handleCollapseAll">折叠全部节点</button>
21+
</div>
22+
</div>
1623
</div>
1724
</div>
1825

1926
<!-- 数据正确性验证 -->
20-
<div class="panel">
27+
<!-- <div class="panel">
2128
<div class="header">数据正确性验证</div>
2229
<div class="body">
2330
<div class="interface">
@@ -27,7 +34,7 @@
2734
</div>
2835
<div class="desc">数据正确性</div>
2936
</div>
30-
</div>
37+
</div> -->
3138

3239
<!-- 单选 -->
3340
<div class="panel">
@@ -176,7 +183,8 @@ const genChildrenData = (nodeCount = 2) => {
176183
return treeDataGenerator({
177184
treeDepth: 1,
178185
nodesPerLevel: nodeCount,
179-
inOrder: true
186+
inOrder: true,
187+
useNanoID: true,
180188
})
181189
}
182190
@@ -249,9 +257,23 @@ export default defineComponent({
249257
})
250258
}
251259
260+
const basicTreeRef = ref()
261+
262+
const handleExpandAll = () => {
263+
basicTreeRef.value.setExpandAll(true)
264+
}
265+
266+
const handleCollapseAll = () => {
267+
basicTreeRef.value.setExpandAll(false)
268+
basicTreeRef.value.scrollTo(basicUsage.value[0].id, 0)
269+
}
270+
252271
return {
253272
// 基本用法
254273
basicUsage,
274+
basicTreeRef,
275+
handleExpandAll,
276+
handleCollapseAll,
255277
256278
// 数据正确性
257279
orderData,

‎examples/Performance.vue

+70-23
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,28 @@
66
<div class="control">
77
<div class="desc-block">
88
<p>说明：在 Chrome 下表现良好</p>
9-
<p>
10-
在火狐浏览器下，因为其异步滚动策略 (scroll-linked)
11-
，在快速滚动时会导致内容空白。
12-
</p>
13-
<p>
14-
另：浏览器元素/文档是有最大高度限制的，过多数据会导致显示不正常(Chrome
15-
下 100 万条可以正常显示，但是在火狐或 Edge 则不行)
16-
</p>
9+
<p>浏览器元素/文档是有最大高度限制的，过多数据会导致显示不正常</p>
10+
<p>生成节点比较耗时，请注意节点深度</p>
1711
</div>
12+
<hr>
1813
<div class="controls">
1914
<label>节点深度：</label>
2015
<input v-model="params.treeDepth" type="number" />
16+
(请输入 1-10 的整数)
2117
</div>
2218
<div class="controls">
2319
<label>每层节点个数：</label>
2420
<input v-model="params.nodesPerLevel" type="number" />
2521
</div>
2622
<div class="controls">
27-
<label>总节点个数：</label>
23+
<label>预计生成节点个数：</label>
24+
<span>
25+
{{ totalNodesToGenerate }}
26+
<span v-if="tooManyNodes" style="color: red">节点过多或无效节点数，请调整节点深度或个数</span>
27+
</span>
28+
</div>
29+
<div class="controls">
30+
<label>已生成节点个数：</label>
2831
{{ nodeTotal }}
2932
</div>
3033
<div class="controls">
@@ -43,6 +46,13 @@
4346
<span v-else style="color: green">树数据已设置</span>
4447
</div>
4548
</div>
49+
<hr>
50+
<div class="controls">
51+
<div class="actions">
52+
<button @click="handleExpandAll">展开全部节点</button>
53+
<button @click="handleCollapseAll">折叠全部节点</button>
54+
</div>
55+
</div>
4656
<div class="controls">
4757
<label>滚动节点id：</label>
4858
<input v-model="scrollKey" type="text" />
@@ -63,6 +73,9 @@
6373
<div class="actions">
6474
<button @click="handleScrollToNode">滚动到此节点</button>
6575
</div>
76+
<div class="actions">
77+
<p>(滚动只对没被折叠的节点有效)</p>
78+
</div>
6679
</div>
6780
</div>
6881
</div>
@@ -71,7 +84,7 @@
7184
<script lang="ts">
7285
import VTree from '../src'
7386
import treeDataGenerator from '../tests/tree-data-generator'
74-
import { defineComponent, ref } from 'vue-demi'
87+
import { computed, defineComponent, ref } from 'vue-demi'
7588
7689
interface TreeMockMeta {
7790
treeDepth: number
@@ -80,20 +93,20 @@ interface TreeMockMeta {
8093
8194
const dataAmountMap: Record<string, TreeMockMeta> = {
8295
'1w': {
83-
treeDepth: 2,
84-
nodesPerLevel: 100
96+
treeDepth: 3,
97+
nodesPerLevel: 22
8598
},
8699
'10w': {
87-
treeDepth: 2,
88-
nodesPerLevel: 320
100+
treeDepth: 3,
101+
nodesPerLevel: 47
89102
},
90103
'20w': {
91-
treeDepth: 2,
92-
nodesPerLevel: 450
104+
treeDepth: 3,
105+
nodesPerLevel: 59
93106
},
94107
'30w': {
95-
treeDepth: 2,
96-
nodesPerLevel: 550
108+
treeDepth: 3,
109+
nodesPerLevel: 67
97110
}
98111
}
99112
@@ -117,7 +130,29 @@ export default defineComponent({
117130
const scrollVerticalOption = ref('top')
118131
const scrollValue = ref(0)
119132
const tree = ref()
133+
134+
const totalNodesToGenerate = computed(() => {
135+
const d = ~~Number(params.value.treeDepth)
136+
const n = ~~Number(params.value.nodesPerLevel)
137+
138+
if (d < 1 || d > 10) return 0
139+
if (n < 1) return 0
140+
141+
let total = 0
142+
let times = d
143+
while (times) {
144+
total += Math.pow(n, times--)
145+
}
146+
147+
return total
148+
})
149+
150+
const tooManyNodes = computed(() => {
151+
return totalNodesToGenerate.value < 1 || totalNodesToGenerate.value > 1000000
152+
})
153+
120154
const handleGenerate = () => {
155+
if (tooManyNodes.value) return
121156
const mock = treeDataGenerator(
122157
Object.assign({}, params.value, {
123158
inOrder: true,
@@ -146,6 +181,15 @@ export default defineComponent({
146181
)
147182
}
148183
184+
const handleExpandAll = () => {
185+
tree.value.setExpandAll(true)
186+
}
187+
188+
const handleCollapseAll = () => {
189+
tree.value.setExpandAll(false)
190+
tree.value.scrollTo('0', 0)
191+
}
192+
149193
return {
150194
tree,
151195
cache,
@@ -159,7 +203,11 @@ export default defineComponent({
159203
handleGenerate,
160204
handleGenerateTotal,
161205
handleSetData,
162-
handleScrollToNode
206+
handleScrollToNode,
207+
totalNodesToGenerate,
208+
tooManyNodes,
209+
handleExpandAll,
210+
handleCollapseAll,
163211
}
164212
},
165213
created() {
@@ -181,16 +229,15 @@ export default defineComponent({
181229
182230
.control {
183231
flex: 1;
184-
padding: 30px 0;
232+
padding: 10px 0;
185233
border-left: 1px solid gray;
186234
187235
.desc-block {
188-
padding: 10px 30px;
189-
margin-bottom: 20px;
236+
padding: 0 30px;
190237
}
191238
192239
.controls {
193-
@left-len: 120px;
240+
@left-len: 150px;
194241
195242
padding: 10px;
196243

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@wsfe/vue-tree",
3-
"version": "3.0.2",
3+
"version": "3.0.3",
44
"types": "./types",
55
"description": "A vue tree component using virtual list.",
66
"main": "./dist/vue-tree.umd.min.js",
@@ -57,6 +57,7 @@
5757
"devDependencies": {
5858
"@babel/preset-env": "^7.20.2",
5959
"@babel/preset-typescript": "^7.18.6",
60+
"@faker-js/faker": "^8.0.2",
6061
"@types/jest": "26.0.14",
6162
"@vitejs/plugin-vue": "^4.0.0",
6263
"@vue/babel-preset-app": "^5.0.8",

0 commit comments

Comments
 (0)