Skip to content

Commit 594dc07

Browse files
tangjinzhoutangjinzhou
committed
perf: update listeners
1 parent 8b6b506 commit 594dc07

File tree

24 files changed

+93
-84
lines changed

24 files changed

+93
-84
lines changed

‎components/_util/props-util.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ export function getEvents(child) {
201201
// use getListeners instead this.$listeners
202202
// https://github.com/vueComponent/ant-design-vue/issues/1705
203203
export function getListeners(context) {
204-
return context.$vnode ? context.$vnode.componentOptions.listeners || {} : context.$listeners;
204+
return (context.$vnode ? context.$vnode.componentOptions.listeners : context.$listeners) || {};
205205
}
206206
export function getClass(ele) {
207207
let data = {};

‎components/_util/proxyComponent.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import PropTypes from './vue-types';
2-
import { getOptionProps } from './props-util';
2+
import { getOptionProps, getListeners } from './props-util';
33

44
function getDisplayName(WrappedComponent) {
55
return WrappedComponent.name || 'Component';
@@ -23,7 +23,7 @@ export default function wrapWithConnect(WrappedComponent) {
2323
},
2424
},
2525
render() {
26-
const { $listeners, $slots = {}, $scopedSlots } = this;
26+
const { $slots = {}, $scopedSlots } = this;
2727
const props = getOptionProps(this);
2828
const wrapProps = {
2929
props: {
@@ -32,7 +32,7 @@ export default function wrapWithConnect(WrappedComponent) {
3232
componentWillReceiveProps: { ...props },
3333
children: $slots.default || props.children || [],
3434
},
35-
on: $listeners,
35+
on: getListeners(this),
3636
};
3737
if (Object.keys($scopedSlots).length) {
3838
wrapProps.scopedSlots = $scopedSlots;

‎components/_util/store/connect.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import shallowEqual from 'shallowequal';
22
import omit from 'omit.js';
3-
import { getOptionProps } from '../props-util';
3+
import { getOptionProps, getListeners } from '../props-util';
44
import PropTypes from '../vue-types';
55
import proxyComponent from '../proxyComponent';
66

@@ -81,7 +81,7 @@ export default function connect(mapStateToProps) {
8181
},
8282
render() {
8383
this.preProps = { ...this.$props };
84-
const { $listeners, $slots = {}, $scopedSlots, subscribed, store } = this;
84+
const { $slots = {}, $scopedSlots, subscribed, store } = this;
8585
const props = getOptionProps(this);
8686
this.preProps = { ...omit(props, ['__propsSymbol__']) };
8787
const wrapProps = {
@@ -90,7 +90,7 @@ export default function connect(mapStateToProps) {
9090
...subscribed,
9191
store,
9292
},
93-
on: $listeners,
93+
on: getListeners(this),
9494
scopedSlots: $scopedSlots,
9595
};
9696
return (

‎components/auto-complete/InputElement.jsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import PropTypes from '../_util/vue-types';
22
import { cloneElement } from '../_util/vnode';
3-
import { getOptionProps } from '../_util/props-util';
3+
import { getOptionProps, getListeners } from '../_util/props-util';
44
function chaining(...fns) {
55
return function(...args) {
66
// eslint-disable-line
@@ -14,6 +14,7 @@ function chaining(...fns) {
1414
}
1515
export default {
1616
name: 'InputElement',
17+
inheritAttrs: false,
1718
props: {
1819
value: PropTypes.any,
1920
disabled: PropTypes.bool,
@@ -30,16 +31,17 @@ export default {
3031
},
3132

3233
render() {
33-
const { $slots = {}, $listeners = {}, $attrs = {} } = this;
34+
const { $slots = {}, $attrs = {} } = this;
35+
const listeners = getListeners(this);
3436
const props = getOptionProps(this);
3537
const value = props.value === undefined ? '' : props.value;
3638
const children = $slots.default[0];
3739
const { componentOptions = {} } = $slots.default[0];
38-
const { listeners = {} } = componentOptions;
39-
const newEvent = { ...listeners };
40+
const { listeners: events = {} } = componentOptions;
41+
const newEvent = { ...events };
4042

41-
for (const [eventName, event] of Object.entries($listeners)) {
42-
newEvent[eventName] = chaining(event, listeners[eventName]);
43+
for (const [eventName, event] of Object.entries(listeners)) {
44+
newEvent[eventName] = chaining(event, events[eventName]);
4345
}
4446

4547
return cloneElement(children, {

‎components/auto-complete/__tests__/__snapshots__/demo.test.js.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
2323
<div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">input here</div>
2424
<ul>
2525
<li class="ant-select-search ant-select-search--inline">
26-
<div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field" value=""><input type="text" value="" class="ant-input"><span class="ant-input-suffix"><i slot="suffix" aria-label="icon: search" class="certain-category-icon anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
26+
<div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field"><input type="text" value="" class="ant-input"><span class="ant-input-suffix"><i slot="suffix" aria-label="icon: search" class="certain-category-icon anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
2727
</li>
2828
</ul>
2929
</div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
@@ -84,7 +84,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
8484
<div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">input here</div>
8585
<ul>
8686
<li class="ant-select-search ant-select-search--inline">
87-
<div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field" value=""><input type="text" value="" class="ant-input"><span class="ant-input-suffix"><button type="button" class="search-btn ant-btn ant-btn-primary ant-btn-lg"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></button></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
87+
<div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field"><input type="text" value="" class="ant-input"><span class="ant-input-suffix"><button type="button" class="search-btn ant-btn ant-btn-primary ant-btn-lg"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></button></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
8888
</li>
8989
</ul>
9090
</div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>

‎components/auto-complete/index.jsx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
getOptionProps,
1010
filterEmpty,
1111
isValidElement,
12+
getListeners,
1213
} from '../_util/props-util';
1314
import Base from '../base';
1415

@@ -91,14 +92,7 @@ const AutoComplete = {
9192
},
9293

9394
render() {
94-
const {
95-
size,
96-
prefixCls: customizePrefixCls,
97-
optionLabelProp,
98-
dataSource,
99-
$slots,
100-
$listeners,
101-
} = this;
95+
const { size, prefixCls: customizePrefixCls, optionLabelProp, dataSource, $slots } = this;
10296

10397
const getPrefixCls = this.configProvider.getPrefixCls;
10498
const prefixCls = getPrefixCls('select', customizePrefixCls);
@@ -143,7 +137,7 @@ const AutoComplete = {
143137
},
144138
class: cls,
145139
ref: 'select',
146-
on: $listeners,
140+
on: getListeners(this),
147141
};
148142
return <Select {...selectProps}>{options}</Select>;
149143
},

‎components/avatar/Avatar.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ConfigConsumerProps } from '../config-provider';
22
import Icon from '../icon';
3+
import { getListeners } from '../_util/props-util';
34

45
export default {
56
name: 'AAvatar',
@@ -155,7 +156,7 @@ export default {
155156
}
156157
}
157158
return (
158-
<span {...{ on: this.$listeners, class: classString, style: sizeStyle }}>{children}</span>
159+
<span {...{ on: getListeners(this), class: classString, style: sizeStyle }}>{children}</span>
159160
);
160161
},
161162
};

‎components/back-top/index.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import BaseMixin from '../_util/BaseMixin';
66
import getTransitionProps from '../_util/getTransitionProps';
77
import { ConfigConsumerProps } from '../config-provider';
88
import Base from '../base';
9+
import { getListeners } from '../_util/props-util';
910

1011
const easeInOutCubic = (t, b, c, d) => {
1112
const cc = c - b;
@@ -106,7 +107,7 @@ const BackTop = {
106107
},
107108

108109
render() {
109-
const { prefixCls: customizePrefixCls, $slots, $listeners } = this;
110+
const { prefixCls: customizePrefixCls, $slots } = this;
110111

111112
const getPrefixCls = this.configProvider.getPrefixCls;
112113
const prefixCls = getPrefixCls('back-top', customizePrefixCls);
@@ -118,7 +119,7 @@ const BackTop = {
118119
);
119120
const divProps = {
120121
on: {
121-
...$listeners,
122+
...getListeners(this),
122123
click: this.scrollToTop,
123124
},
124125
class: prefixCls,

‎components/badge/Badge.jsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import PropTypes from '../_util/vue-types';
22
import ScrollNumber from './ScrollNumber';
33
import classNames from 'classnames';
4-
import { initDefaultProps, filterEmpty, getComponentFromProp } from '../_util/props-util';
4+
import {
5+
initDefaultProps,
6+
filterEmpty,
7+
getComponentFromProp,
8+
getListeners,
9+
} from '../_util/props-util';
510
import { cloneElement } from '../_util/vnode';
611
import getTransitionProps from '../_util/getTransitionProps';
712
import isNumeric from '../_util/isNumeric';
@@ -178,7 +183,7 @@ export default {
178183
if (!children.length && status) {
179184
return (
180185
<span
181-
{...{ on: this.$listeners }}
186+
{...{ on: getListeners(this) }}
182187
class={this.getBadgeClassName(prefixCls)}
183188
style={this.getStyleWithOffset()}
184189
>
@@ -191,7 +196,7 @@ export default {
191196
const transitionProps = getTransitionProps(children.length ? `${prefixCls}-zoom` : '');
192197

193198
return (
194-
<span {...{ on: this.$listeners }} class={this.getBadgeClassName(prefixCls)}>
199+
<span {...{ on: getListeners(this) }} class={this.getBadgeClassName(prefixCls)}>
195200
{children}
196201
<transition {...transitionProps}>{scrollNumber}</transition>
197202
{statusText}

‎components/button/button.jsx

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Wave from '../_util/wave';
22
import Icon from '../icon';
33
import buttonTypes from './buttonTypes';
4-
import { filterEmpty } from '../_util/props-util';
4+
import { filterEmpty, getListeners } from '../_util/props-util';
55
import { ConfigConsumerProps } from '../config-provider';
66

77
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
@@ -128,26 +128,15 @@ export default {
128128
},
129129
},
130130
render() {
131-
const {
132-
type,
133-
htmlType,
134-
classes,
135-
icon,
136-
disabled,
137-
handleClick,
138-
sLoading,
139-
$slots,
140-
$attrs,
141-
$listeners,
142-
} = this;
131+
const { type, htmlType, classes, icon, disabled, handleClick, sLoading, $slots, $attrs } = this;
143132
const buttonProps = {
144133
attrs: {
145134
...$attrs,
146135
disabled,
147136
},
148137
class: classes,
149138
on: {
150-
...$listeners,
139+
...getListeners(this),
151140
click: handleClick,
152141
},
153142
};

0 commit comments

Comments
 (0)