From fff3c552e24f7d5b08252696bc55c8a1b9df3509 Mon Sep 17 00:00:00 2001 From: syuilo Date: Tue, 10 Aug 2021 18:19:59 +0900 Subject: [PATCH] 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 --- src/client/components/date-separated-list.vue | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue index 6a0c7f29f..7a4cc5ef9 100644 --- a/src/client/components/date-separated-list.vue +++ b/src/client/components/date-separated-list.vue @@ -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 + }); }, });