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:
syuilo 2021-08-10 18:19:59 +09:00
parent 488e05b934
commit 219e1f8dae

View File

@ -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>