Skip to content

Commit 0aa26fe

Browse files
committed
Update.
1 parent c368549 commit 0aa26fe

File tree

1 file changed

+25
-46
lines changed

1 file changed

+25
-46
lines changed

README.md

Lines changed: 25 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,6 @@
2929
* [Total memory used](#total-memory-used)
3030
* [How it works](#how-it-works)
3131
* [Simple usage](#simple-usage)
32-
* [Using by npm module](#using-by-npm-module)
33-
* [Using by script include](#using-by-script-include)
3432
* [Attentions](#attentions)
3533
* [Props type](#props-type)
3634
* [Public methods](#public-methods)
@@ -43,7 +41,7 @@
4341

4442
## Advantages
4543

46-
* Tiny and very very easy to use.
44+
* Tiny and very easy to use.
4745

4846
* Big data list with high performance.
4947

@@ -56,13 +54,15 @@
5654

5755
## Live demos
5856

59-
* [Use with item-mode](https://tangbc.github.io/vue-virtual-scroll-list/demos/item-mode).
57+
* [Build 100,000 items with item-mode](https://tangbc.github.io/vue-virtual-scroll-list/demos/item-mode).
6058

61-
* [Use with vfor-mode](https://tangbc.github.io/vue-virtual-scroll-list/demos/vfor-mode).
59+
* [Build 100,000 items with vfor-mode](https://tangbc.github.io/vue-virtual-scroll-list/demos/vfor-mode).
6260

63-
* [Use with variable height](https://tangbc.github.io/vue-virtual-scroll-list/demos/variable-height).
61+
* [Build 100,000 items with variable height](https://tangbc.github.io/vue-virtual-scroll-list/demos/variable-height).
6462

65-
Besides, you can also compare the experience which **without using** virtual-list here: [without-virtual-list](https://tangbc.github.io/vue-virtual-scroll-list/demos/without-virtual-list).
63+
The main difference between `item-mode` and `vfor-mode` is that: `item-mode` make a higher performance but not very convenient to handle changing data frequently; however, `vfor-mode` is just the opposite.
64+
65+
Besides, you can also compare the experience which without using virtual-list here: [without-virtual-list](https://tangbc.github.io/vue-virtual-scroll-list/demos/without-virtual-list).
6666

6767

6868
## Performance comparison
@@ -71,19 +71,19 @@ According to the demos above, here are lists of approximate statistics:
7171

7272
#### Build time wasted
7373

74-
| Count | item-mode | vfor-mode | without-virtual-list |
75-
|-------------|-----------|-----------|----------------------|
76-
| 1,000 | 8 ms | 35 ms | 220 ms |
77-
| 10,000 | 10 ms | 170 ms | 1500 ms |
78-
| 100,000 | 20 ms | 1300 ms | Browser crash! |
74+
| Build amount | item-mode | vfor-mode | *without virtual list* |
75+
|-------------:|-----------|-----------|------------------------|
76+
| **1,000** | 8 ms | 35 ms | 220 ms |
77+
| **10,000** | 10 ms | 170 ms | 1500 ms |
78+
| **100,000** | 20 ms | 1300 ms | Browser crash! |
7979

8080
#### Total memory used
8181

82-
| Count | item-mode | vfor-mode | without-virtual-list |
83-
|-------------|-----------|-----------|----------------------|
84-
| 1,000 | 15 MB | 80 MB | 200 MB |
85-
| 10,000 | 25 MB | 120 MB | 220 MB |
86-
| 100,000 | 55 MB | 550 MB | Browser crash! |
82+
| Build amount | item-mode | vfor-mode | *without virtual list* |
83+
|-------------:|-----------|-----------|------------------------|
84+
| **1,000** | 10 MB | 80 MB | 200 MB |
85+
| **10,000** | 25 MB | 120 MB | 220 MB |
86+
| **100,000** | 55 MB | 550 MB | Browser crash! |
8787

8888
## How it works
8989

@@ -92,8 +92,6 @@ According to the demos above, here are lists of approximate statistics:
9292

9393
## Simple usage
9494

95-
#### Using by npm module:
96-
9795
```console
9896
npm install vue-virtual-scroll-list --save
9997
```
@@ -121,38 +119,14 @@ npm install vue-virtual-scroll-list --save
121119
</script>
122120
```
123121

124-
125-
#### Using by script include:
126-
127-
```html
128-
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
129-
<script src="https://tangbc.github.io/vue-virtual-scroll-list/index.js"></script>
130-
<div id="app">
131-
<virtual-list :size="40" :remain="8" wtag="ul">
132-
<li class="item" v-for="(udf, index) of items" :key="index">Item: #{{ index }}</li>
133-
</virtual-list>
134-
</div>
135-
```
136-
137-
```javascript
138-
// Global name as `VirtualScrollList`
139-
Vue.component('virtual-list', VirtualScrollList)
140-
new Vue({
141-
el: '#app',
142-
data: {
143-
items: new Array(100000)
144-
}
145-
})
146-
```
147-
148-
More use ways or get start you can refer to these clearly [demos](https://github.com/tangbc/vue-virtual-scroll-list/tree/master/demos) or [test suites](https://github.com/tangbc/vue-virtual-scroll-list/tree/master/test).
122+
**More use ways or getting start you can refer to these clearly [demos](https://github.com/tangbc/vue-virtual-scroll-list/tree/master/demos) or [test suites](https://github.com/tangbc/vue-virtual-scroll-list/tree/master/test).**
149123

150124

151125
## Attentions
152126

153127
* Must assign the `:key` property on `<item>` component or dom frag with `v-for` directive.
154128

155-
* Consider use `box-sizing: border-box` on `<item>` if you want absolutely correct scroll height.
129+
* Consider using `box-sizing: border-box` on `<item>` if you want absolutely correct scroll height.
156130

157131

158132
## Props type
@@ -205,9 +179,11 @@ If you assign `variable` as `true`, **do not** set inline style height inside `<
205179
</template>
206180
```
207181

182+
Corresponding example you can refer to the [demo of variable height](https://tangbc.github.io/vue-virtual-scroll-list/demos/variable-height).
183+
208184
### About item mode
209185

210-
Use `item-mode` can save a considerable amount of memory and performance (it's memory occupied is about only 1/10 of `vfor-mode`). In this mode, prop `item`, `itemcount` and `itemprops` are both required, and you don't have to put `<item/>` with a v-for frag inside `virtual-list`, just assign it as prop `item`:
186+
Using `item-mode` can save a considerable amount of memory and performance. In this mode, prop `item`, `itemcount` and `itemprops` are both required, and you don't have to put `<item/>` with a v-for frag inside `virtual-list`, just assign it as prop `item`:
211187

212188
```vue
213189
<template>
@@ -243,6 +219,8 @@ Use `item-mode` can save a considerable amount of memory and performance (it's m
243219
244220
```
245221

222+
Corresponding example you can refer to the [demo of item-mode](https://tangbc.github.io/vue-virtual-scroll-list/demos/item-mode).
223+
246224

247225
## Contributions
248226

@@ -253,6 +231,7 @@ Welcome to improve vue-virtual-scroll-list with any issue, pull request or code
253231

254232
Maintain and update occasionally, for changes see [release](https://github.com/tangbc/vue-virtual-scroll-list/releases).
255233

234+
256235
## License
257236

258237
[MIT License](https://github.com/tangbc/vue-virtual-scroll-list/blob/master/LICENSE)

0 commit comments

Comments
 (0)