Skip to content

Commit 56905b3

Browse files
pdanpdanrstoenescu
pdanpdan
authored and
rstoenescu
committed
feat(quasar): Add cache for listeners and some directives to reduce number of renders (quasarframework#5669)
* feat(quasar): Add cache for listeners and some directives to reduce number of renders * Update QColor.js
1 parent dcf0fdb commit 56905b3

File tree

41 files changed

+368
-320
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+368
-320
lines changed

‎ui/dev/components/components/button-toggle.vue‎

Lines changed: 69 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,31 +5,30 @@
55
<strong>{{ model }}</strong>
66
</p>
77

8-
<q-btn-toggle v-model="model" toggle-color="primary"
9-
unelevated rounded
10-
:options="[
11-
{label: 'One', value: 'one'},
12-
{label: 'Two', value: 'two'},
13-
{label: 'Three', value: 'three'}
14-
]"
8+
<q-btn-toggle
9+
v-model="model"
10+
toggle-color="primary"
11+
unelevated
12+
rounded
13+
:options="optionsO1"
1514
/>
1615

17-
<q-btn-toggle v-model="model" toggle-color="primary" color="white" text-color="black"
18-
spread no-caps
19-
:options="[
20-
{label: 'One', value: 'one'},
21-
{label: 'Two', value: 'two'},
22-
{label: 'Three', value: 'three'}
23-
]"
16+
<q-btn-toggle
17+
v-model="model"
18+
toggle-color="primary"
19+
color="white"
20+
text-color="black"
21+
spread
22+
no-caps
23+
:options="optionsO1"
2424
/>
2525

26-
<q-btn-toggle v-model="model" toggle-color="primary"
27-
outline rounded
28-
:options="[
29-
{label: 'One tooltip', value: 'one', slot: 'one'},
30-
{label: 'Two tooltip', value: 'two', slot: 'two'},
31-
{label: 'Three tooltip', value: 'three', slot: 'three'}
32-
]"
26+
<q-btn-toggle
27+
v-model="model"
28+
toggle-color="primary"
29+
outline
30+
rounded
31+
:options="optionsS1"
3332
>
3433
<template v-slot:one>
3534
<q-tooltip>One!</q-tooltip>
@@ -44,13 +43,12 @@
4443
</template>
4544
</q-btn-toggle>
4645

47-
<q-btn-toggle v-model="model" toggle-color="primary"
48-
push rounded
49-
:options="[
50-
{value: 'one', slot: 'one'},
51-
{value: 'two', slot: 'two'},
52-
{value: 'three', slot: 'three'}
53-
]"
46+
<q-btn-toggle
47+
v-model="model"
48+
toggle-color="primary"
49+
push
50+
rounded
51+
:options="optionsS2"
5452
>
5553
<template v-slot:one>
5654
<div class="row items-center no-wrap">
@@ -80,10 +78,19 @@
8078
</template>
8179
</q-btn-toggle>
8280

83-
<q-btn-toggle v-model="model" :options="[
84-
{label: 'One Clearable', value: 'one'},
85-
{label: 'Two', value: 'two'}
86-
]" clearable
81+
<q-btn-toggle
82+
v-model="model"
83+
:options="optionsO2"
84+
clearable
85+
/>
86+
87+
<q-btn-toggle
88+
:value="modelD"
89+
@input="updateD"
90+
toggle-color="primary"
91+
unelevated
92+
rounded
93+
:options="optionsD"
8794
/>
8895
</div>
8996
</template>
@@ -93,13 +100,43 @@ export default {
93100
data () {
94101
return {
95102
model: '',
103+
modelD: '',
96104
options: [true, false],
105+
optionsO1: [
106+
{ label: 'One', value: 'one' },
107+
{ label: 'Two', value: 'two' },
108+
{ label: 'Three', value: 'three' }
109+
],
110+
optionsO2: [
111+
{ label: 'One Clearable', value: 'one' },
112+
{ label: 'Two', value: 'two' }
113+
],
114+
optionsS1: [
115+
{ label: 'One tooltip', value: 'one', slot: 'one' },
116+
{ label: 'Two tooltip', value: 'two', slot: 'two' },
117+
{ label: 'Three tooltip', value: 'three', slot: 'three' }
118+
],
119+
optionsS2: [
120+
{ value: 'one', slot: 'one' },
121+
{ value: 'two', slot: 'two' },
122+
{ value: 'three', slot: 'three' }
123+
],
124+
optionsD: [
125+
{ label: 'One', value: 'one', count: 0 },
126+
{ label: 'Two', value: 'two', count: 0 },
127+
{ label: 'Three', value: 'three', count: 0 }
128+
],
97129
sizes: ['sm', 'md', 'lg']
98130
}
99131
},
100132
methods: {
101133
log (name, data) {
102134
console.log(name, JSON.stringify(data))
135+
},
136+
137+
updateD (value, opt) {
138+
this.modelD = value
139+
opt.count++
103140
}
104141
}
105142
}

‎ui/src/components/btn-dropdown/QBtnDropdown.js‎

Lines changed: 30 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import QBtnGroup from '../btn-group/QBtnGroup.js'
88
import QMenu from '../menu/QMenu.js'
99

1010
import { slot } from '../../utils/slot.js'
11+
import { cache } from '../../utils/vm.js'
1112

1213
export default Vue.extend({
1314
name: 'QBtnDropdown',
@@ -80,7 +81,24 @@ export default Vue.extend({
8081
contentStyle: this.contentStyle,
8182
separateClosePopup: true
8283
},
83-
on: this.menuEvents
84+
on: cache(this, 'menu', {
85+
'before-show': e => {
86+
this.showing = true
87+
this.$emit('before-show', e)
88+
},
89+
show: e => {
90+
this.$emit('show', e)
91+
this.$emit('input', true)
92+
},
93+
'before-hide': e => {
94+
this.showing = false
95+
this.$emit('before-hide', e)
96+
},
97+
hide: e => {
98+
this.$emit('hide', e)
99+
this.$emit('input', false)
100+
}
101+
})
84102
}, slot(this, 'default'))
85103
)
86104

@@ -93,7 +111,11 @@ export default Vue.extend({
93111
noWrap: true,
94112
round: false
95113
},
96-
on: this.nonSplitEvents
114+
on: cache(this, 'nonSpl', {
115+
click: e => {
116+
this.$emit('click', e)
117+
}
118+
})
97119
}, label.concat(Arrow))
98120
}
99121

@@ -106,7 +128,12 @@ export default Vue.extend({
106128
iconRight: this.iconRight,
107129
round: false
108130
},
109-
on: this.splitEvents
131+
on: cache(this, 'spl', {
132+
click: e => {
133+
this.hide()
134+
this.$emit('click', e)
135+
}
136+
})
110137
}, label)
111138

112139
return h(QBtnGroup, {
@@ -156,40 +183,6 @@ export default Vue.extend({
156183
}
157184
},
158185

159-
created () {
160-
this.nonSplitEvents = {
161-
click: e => {
162-
this.$emit('click', e)
163-
}
164-
}
165-
166-
this.splitEvents = {
167-
click: e => {
168-
this.hide()
169-
this.$emit('click', e)
170-
}
171-
}
172-
173-
this.menuEvents = {
174-
'before-show': e => {
175-
this.showing = true
176-
this.$emit('before-show', e)
177-
},
178-
show: e => {
179-
this.$emit('show', e)
180-
this.$emit('input', true)
181-
},
182-
'before-hide': e => {
183-
this.showing = false
184-
this.$emit('before-hide', e)
185-
},
186-
hide: e => {
187-
this.$emit('hide', e)
188-
this.$emit('input', false)
189-
}
190-
}
191-
},
192-
193186
mounted () {
194187
this.value === true && this.show()
195188
}

‎ui/src/components/carousel/QCarousel.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import FullscreenMixin from '../../mixins/fullscreen.js'
88

99
import { isNumber } from '../../utils/is.js'
1010
import { mergeSlot } from '../../utils/slot.js'
11+
import { cache } from '../../utils/vm.js'
1112

1213
export default Vue.extend({
1314
name: 'QCarousel',
@@ -116,12 +117,12 @@ export default Vue.extend({
116117
h(QBtn, {
117118
staticClass: 'q-carousel__control q-carousel__prev-arrow absolute',
118119
props: { size: 'lg', color: this.controlColor, icon: this.arrowIcons[0], round: true, flat: true, dense: true },
119-
on: { click: this.previous }
120+
on: cache(this, 'prev', { click: this.previous })
120121
}),
121122
h(QBtn, {
122123
staticClass: 'q-carousel__control q-carousel__next-arrow absolute',
123124
props: { size: 'lg', color: this.controlColor, icon: this.arrowIcons[1], round: true, flat: true, dense: true },
124-
on: { click: this.next }
125+
on: cache(this, 'next', { click: this.next })
125126
})
126127
)
127128

@@ -139,9 +140,7 @@ export default Vue.extend({
139140
flat: true,
140141
size: 'sm'
141142
},
142-
on: {
143-
click: () => { this.goTo(name) }
144-
}
143+
on: cache(this, 'nav#' + name, { click: () => { this.goTo(name) } })
145144
})
146145
}))
147146
}
@@ -154,9 +153,8 @@ export default Vue.extend({
154153
attrs: {
155154
src: slide.imgSrc
156155
},
157-
on: {
158-
click: () => { this.goTo(slide.name) }
159-
}
156+
key: 'tmb#' + slide.name,
157+
on: cache(this, 'tmb#' + slide.name, { click: () => { this.goTo(slide.name) } })
160158
})
161159
}))
162160
}

‎ui/src/components/checkbox/QCheckbox.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Vue from 'vue'
33
import CheckboxMixin from '../../mixins/checkbox.js'
44

55
import { slot, mergeSlot } from '../../utils/slot.js'
6+
import { cache } from '../../utils/vm.js'
67

78
export default Vue.extend({
89
name: 'QCheckbox',
@@ -68,7 +69,7 @@ export default Vue.extend({
6869
h('input', {
6970
staticClass: 'q-checkbox__native q-ma-none q-pa-none invisible',
7071
attrs: { type: 'checkbox' },
71-
on: { change: this.toggle }
72+
on: cache(this, 'inp', { change: this.toggle })
7273
})
7374
)
7475

@@ -93,10 +94,10 @@ export default Vue.extend({
9394
staticClass: 'q-checkbox cursor-pointer no-outline row inline no-wrap items-center',
9495
class: this.classes,
9596
attrs: { tabindex: this.computedTabindex },
96-
on: {
97+
on: cache(this, 'inpExt', {
9798
click: this.toggle,
9899
keydown: this.__keyDown
99-
}
100+
})
100101
}, child)
101102
}
102103
})

‎ui/src/components/chip/QChip.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import SizeMixin from '../../mixins/size.js'
88

99
import { stopAndPrevent } from '../../utils/event.js'
1010
import { mergeSlotSafely } from '../../utils/slot.js'
11+
import { cache } from '../../utils/vm.js'
1112

1213
const sizes = {
1314
xs: 8,
@@ -167,10 +168,10 @@ export default Vue.extend({
167168

168169
const data = this.isClickable ? {
169170
attrs: { tabindex: this.computedTabindex },
170-
on: {
171+
on: cache(this, 'click', {
171172
click: this.__onClick,
172173
keyup: this.__onKeyup
173-
},
174+
}),
174175
directives: [{ name: 'ripple', value: this.ripple }]
175176
} : {}
176177

0 commit comments

Comments
 (0)