Skip to content

Commit a6d8a5c

Browse files
tangbctangbc
committed
Improving get data value performance
1 parent b33b81e commit a6d8a5c

File tree

4 files changed

+69
-48
lines changed

4 files changed

+69
-48
lines changed

‎dist/index.js‎

Lines changed: 43 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* vue-virtual-scroll-list v2.0.9
2+
* vue-virtual-scroll-list v2.1.0
33
* open source under the MIT license
44
* https://github.com/tangbc/vue-virtual-scroll-list#readme
55
*/
@@ -534,11 +534,13 @@
534534
mixins: [Wrapper],
535535
props: ItemProps,
536536
render: function render(h) {
537-
var itemProps = this.extraProps || {};
537+
var component = this.component,
538+
_this$itemProps = this.itemProps,
539+
itemProps = _this$itemProps === void 0 ? {} : _this$itemProps;
538540
itemProps.source = this.source;
539541
return h(this.tag, {
540542
role: 'item'
541-
}, [h(this.component, {
543+
}, [h(component, {
542544
props: itemProps
543545
})]);
544546
}
@@ -548,9 +550,10 @@
548550
mixins: [Wrapper],
549551
props: SlotProps,
550552
render: function render(h) {
553+
var uniqueKey = this.uniqueKey;
551554
return h(this.tag, {
552555
attrs: {
553-
role: this.uniqueKey
556+
role: uniqueKey
554557
}
555558
}, this.$slots["default"]);
556559
}
@@ -744,28 +747,36 @@
744747
// so those components that are reused will not trigger lifecycle mounted
745748
getRenderSlots: function getRenderSlots(h) {
746749
var slots = [];
747-
var start = this.range.start;
748-
var end = this.range.end;
750+
var _this$range = this.range,
751+
start = _this$range.start,
752+
end = _this$range.end;
753+
var dataSources = this.dataSources,
754+
dataKey = this.dataKey,
755+
itemClass = this.itemClass,
756+
itemTag = this.itemTag,
757+
isHorizontal = this.isHorizontal,
758+
extraProps = this.extraProps,
759+
dataComponent = this.dataComponent;
749760

750761
for (var index = start; index <= end; index++) {
751-
var dataSource = this.dataSources[index];
762+
var dataSource = dataSources[index];
752763

753764
if (dataSource) {
754-
if (dataSource[this.dataKey]) {
765+
if (dataSource[dataKey]) {
755766
slots.push(h(Item, {
756-
"class": this.itemClass,
767+
"class": itemClass,
757768
props: {
758-
tag: this.itemTag,
769+
tag: itemTag,
759770
event: EVENT_TYPE.ITEM,
760-
horizontal: this.isHorizontal,
761-
uniqueKey: dataSource[this.dataKey],
771+
horizontal: isHorizontal,
772+
uniqueKey: dataSource[dataKey],
762773
source: dataSource,
763-
extraProps: this.extraProps,
764-
component: this.dataComponent
774+
extraProps: extraProps,
775+
component: dataComponent
765776
}
766777
}));
767778
} else {
768-
console.warn("Cannot get the data-key '".concat(this.dataKey, "' from data-sources."));
779+
console.warn("Cannot get the data-key '".concat(dataKey, "' from data-sources."));
769780
}
770781
} else {
771782
console.warn("Cannot get the index '".concat(index, "' from data-sources."));
@@ -781,26 +792,33 @@
781792
var _this$$slots = this.$slots,
782793
header = _this$$slots.header,
783794
footer = _this$$slots.footer;
784-
var _this$range = this.range,
785-
padFront = _this$range.padFront,
786-
padBehind = _this$range.padBehind;
795+
var _this$range2 = this.range,
796+
padFront = _this$range2.padFront,
797+
padBehind = _this$range2.padBehind;
798+
var rootTag = this.rootTag,
799+
headerClass = this.headerClass,
800+
headerTag = this.headerTag,
801+
wrapTag = this.wrapTag,
802+
wrapClass = this.wrapClass,
803+
footerClass = this.footerClass,
804+
footerTag = this.footerTag;
787805
var padding = this.isHorizontal ? "0px ".concat(padBehind, "px 0px ").concat(padFront, "px") : "".concat(padFront, "px 0px ").concat(padBehind, "px");
788-
return h(this.rootTag, {
806+
return h(rootTag, {
789807
ref: 'root',
790808
on: {
791809
'&scroll': this.onScroll
792810
}
793811
}, [// header slot
794812
header ? h(Slot, {
795-
"class": this.headerClass,
813+
"class": headerClass,
796814
props: {
797-
tag: this.headerTag,
815+
tag: headerTag,
798816
event: EVENT_TYPE.SLOT,
799817
uniqueKey: SLOT_TYPE.HEADER
800818
}
801819
}, header) : null, // main list
802-
h(this.wrapTag, {
803-
"class": this.wrapClass,
820+
h(wrapTag, {
821+
"class": wrapClass,
804822
attrs: {
805823
role: 'group'
806824
},
@@ -809,9 +827,9 @@
809827
}
810828
}, this.getRenderSlots(h)), // footer slot
811829
footer ? h(Slot, {
812-
"class": this.footerClass,
830+
"class": footerClass,
813831
props: {
814-
tag: this.footerTag,
832+
tag: footerTag,
815833
event: EVENT_TYPE.SLOT,
816834
uniqueKey: SLOT_TYPE.FOOTER
817835
}

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-virtual-scroll-list",
3-
"version": "2.0.9",
3+
"version": "2.1.0",
44
"description": "A vue component support big amount data list with high scroll performance.",
55
"main": "dist/index.js",
66
"files": [
@@ -11,7 +11,7 @@
1111
"lint": "eslint --fix src --ext .js",
1212
"dev:docs": "cd example && npm run dev",
1313
"build:docs": "cd example && npm run build",
14-
"build": "rollup --config ./scripts/rollup.production.js",
14+
"build": "npm run lint && rollup --config ./scripts/rollup.production.js",
1515
"dev": "rollup --config ./scripts/rollup.development.js --watch"
1616
},
1717
"repository": {

‎src/index.js‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -211,26 +211,26 @@ const VirtualList = Vue.component('virtual-list', {
211211
// so those components that are reused will not trigger lifecycle mounted
212212
getRenderSlots (h) {
213213
const slots = []
214-
const start = this.range.start
215-
const end = this.range.end
214+
const { start, end } = this.range
215+
const { dataSources, dataKey, itemClass, itemTag, isHorizontal, extraProps, dataComponent } = this
216216
for (let index = start; index <= end; index++) {
217-
const dataSource = this.dataSources[index]
217+
const dataSource = dataSources[index]
218218
if (dataSource) {
219-
if (dataSource[this.dataKey]) {
219+
if (dataSource[dataKey]) {
220220
slots.push(h(Item, {
221-
class: this.itemClass,
221+
class: itemClass,
222222
props: {
223-
tag: this.itemTag,
223+
tag: itemTag,
224224
event: EVENT_TYPE.ITEM,
225-
horizontal: this.isHorizontal,
226-
uniqueKey: dataSource[this.dataKey],
225+
horizontal: isHorizontal,
226+
uniqueKey: dataSource[dataKey],
227227
source: dataSource,
228-
extraProps: this.extraProps,
229-
component: this.dataComponent
228+
extraProps: extraProps,
229+
component: dataComponent
230230
}
231231
}))
232232
} else {
233-
console.warn(`Cannot get the data-key '${this.dataKey}' from data-sources.`)
233+
console.warn(`Cannot get the data-key '${dataKey}' from data-sources.`)
234234
}
235235
} else {
236236
console.warn(`Cannot get the index '${index}' from data-sources.`)
@@ -245,27 +245,28 @@ const VirtualList = Vue.component('virtual-list', {
245245
render (h) {
246246
const { header, footer } = this.$slots
247247
const { padFront, padBehind } = this.range
248+
const { rootTag, headerClass, headerTag, wrapTag, wrapClass, footerClass, footerTag } = this
248249
const padding = this.isHorizontal ? `0px ${padBehind}px 0px ${padFront}px` : `${padFront}px 0px ${padBehind}px`
249250

250-
return h(this.rootTag, {
251+
return h(rootTag, {
251252
ref: 'root',
252253
on: {
253254
'&scroll': this.onScroll
254255
}
255256
}, [
256257
// header slot
257258
header ? h(Slot, {
258-
class: this.headerClass,
259+
class: headerClass,
259260
props: {
260-
tag: this.headerTag,
261+
tag: headerTag,
261262
event: EVENT_TYPE.SLOT,
262263
uniqueKey: SLOT_TYPE.HEADER
263264
}
264265
}, header) : null,
265266

266267
// main list
267-
h(this.wrapTag, {
268-
class: this.wrapClass,
268+
h(wrapTag, {
269+
class: wrapClass,
269270
attrs: {
270271
role: 'group'
271272
},
@@ -276,9 +277,9 @@ const VirtualList = Vue.component('virtual-list', {
276277

277278
// footer slot
278279
footer ? h(Slot, {
279-
class: this.footerClass,
280+
class: footerClass,
280281
props: {
281-
tag: this.footerTag,
282+
tag: footerTag,
282283
event: EVENT_TYPE.SLOT,
283284
uniqueKey: SLOT_TYPE.FOOTER
284285
}

‎src/item.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,12 @@ export const Item = Vue.component('virtual-list-item', {
5555
props: ItemProps,
5656

5757
render (h) {
58-
const itemProps = this.extraProps || {}
58+
const { component, itemProps = {} } = this
5959
itemProps.source = this.source
6060

6161
return h(this.tag, {
6262
role: 'item'
63-
}, [h(this.component, {
63+
}, [h(component, {
6464
props: itemProps
6565
})])
6666
}
@@ -73,9 +73,11 @@ export const Slot = Vue.component('virtual-list-slot', {
7373
props: SlotProps,
7474

7575
render (h) {
76+
const { uniqueKey } = this
77+
7678
return h(this.tag, {
7779
attrs: {
78-
role: this.uniqueKey
80+
role: uniqueKey
7981
}
8082
}, this.$slots.default)
8183
}

0 commit comments

Comments
 (0)