perf(client): use function for render slot to improve performance
See: https://forum.vuejs.org/t/how-to-avoid-non-function-value-encountered-for-default-slot-warning/107039
This commit is contained in:
parent
e19cc8bebf
commit
fff3c552e2
1 changed files with 14 additions and 10 deletions
|
@ -48,15 +48,7 @@ export default defineComponent({
|
|||
render() {
|
||||
if (this.items.length === 0) return;
|
||||
|
||||
return h(this.$store.state.animation ? TransitionGroup : 'div', this.$store.state.animation ? {
|
||||
class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
|
||||
name: 'list',
|
||||
tag: 'div',
|
||||
'data-direction': this.direction,
|
||||
'data-reversed': this.reversed ? 'true' : 'false',
|
||||
} : {
|
||||
class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
|
||||
}, this.items.map((item, i) => {
|
||||
const renderChildren = () => this.items.map((item, i) => {
|
||||
const el = this.$slots.default({
|
||||
item: item
|
||||
})[0];
|
||||
|
@ -98,7 +90,19 @@ export default defineComponent({
|
|||
return el;
|
||||
}
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
return h(this.$store.state.animation ? TransitionGroup : 'div', this.$store.state.animation ? {
|
||||
class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
|
||||
name: 'list',
|
||||
tag: 'div',
|
||||
'data-direction': this.direction,
|
||||
'data-reversed': this.reversed ? 'true' : 'false',
|
||||
} : {
|
||||
class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
|
||||
}, {
|
||||
default: renderChildren
|
||||
});
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
Loading…
Reference in a new issue