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() {
|
render() {
|
||||||
if (this.items.length === 0) return;
|
if (this.items.length === 0) return;
|
||||||
|
|
||||||
return h(this.$store.state.animation ? TransitionGroup : 'div', this.$store.state.animation ? {
|
const renderChildren = () => this.items.map((item, i) => {
|
||||||
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 el = this.$slots.default({
|
const el = this.$slots.default({
|
||||||
item: item
|
item: item
|
||||||
})[0];
|
})[0];
|
||||||
|
@ -98,7 +90,19 @@ export default defineComponent({
|
||||||
return el;
|
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>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue