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…
	
	Add table
		Add a link
		
	
		Reference in a new issue