From 723bd2832fc175b653730679a9c2cdb67b6a713d Mon Sep 17 00:00:00 2001 From: tanjinzhou <415800467@qq.com> Date: Wed, 10 Jun 2020 18:21:16 +0800 Subject: [PATCH] feat: update util --- components/_util/BaseMixin.js | 6 +- components/_util/Portal.js | 15 ++- components/_util/createRefHooks.js | 14 +++ components/_util/props-util.js | 57 ++++------- components/_util/vnode.js | 142 ++-------------------------- components/_util/vue-types/utils.js | 4 +- 6 files changed, 50 insertions(+), 188 deletions(-) create mode 100644 components/_util/createRefHooks.js diff --git a/components/_util/BaseMixin.js b/components/_util/BaseMixin.js index 629368e99..e551e4c3c 100644 --- a/components/_util/BaseMixin.js +++ b/components/_util/BaseMixin.js @@ -24,8 +24,10 @@ export default { __emit() { // 直接调用listeners，底层组件不需要vueTool记录events const args = [].slice.call(arguments, 0); - const eventName = args[0]; - const event = this.$listeners[eventName]; + let eventName = args[0]; + // TODO: 后续统一改成onXxxx，不在运行时转，提升性能 + eventName = `on${eventName[0].toUpperCase()}${eventName.substring(1)}`; + const event = this.$attrs[eventName]; if (args.length && event) { if (Array.isArray(event)) { for (let i = 0, l = event.length; i < l; i++) { diff --git a/components/_util/Portal.js b/components/_util/Portal.js index 5e0fdf7cb..0cf4f50c5 100644 --- a/components/_util/Portal.js +++ b/components/_util/Portal.js @@ -1,5 +1,5 @@ import PropTypes from './vue-types'; -import { cloneElement } from './vnode'; +import { Teleport } from 'vue'; export default { name: 'Portal', @@ -8,6 +8,10 @@ export default { children: PropTypes.any.isRequired, didUpdate: PropTypes.func, }, + data() { + this._container = null; + return {}; + }, mounted() { this.createContainer(); }, @@ -37,14 +41,7 @@ export default { render() { if (this._container) { - return cloneElement(this.$props.children, { - directives: [ - { - name: 'ant-portal', - value: this._container, - }, - ], - }); + return {this.$props.children}; } return null; }, diff --git a/components/_util/createRefHooks.js b/components/_util/createRefHooks.js new file mode 100644 index 000000000..8ddb8a7d0 --- /dev/null +++ b/components/_util/createRefHooks.js @@ -0,0 +1,14 @@ +const createRef = fn => { + return { + onVnodeBeforeMounted: vnode => { + fn(vnode.component || vnode.el, vnode.key); + }, + onVnodeUpdated: vnode => { + fn(vnode.component || vnode.el, vnode.key); + }, + onVnodeDestroyed: vnode => { + fn(vnode.component || vnode.el, vnode.key); + }, + }; +}; +export default createRef; diff --git a/components/_util/props-util.js b/components/_util/props-util.js index b69597779..ab504dc42 100644 --- a/components/_util/props-util.js +++ b/components/_util/props-util.js @@ -1,5 +1,6 @@ import isPlainObject from 'lodash/isPlainObject'; import classNames from 'classnames'; +import { isVNode } from 'vue'; // function getType(fn) { // const match = fn && fn.toString().match(/^\s*function (\w+)/); // return match ? match[1] : ''; @@ -10,17 +11,19 @@ export const isOn = key => onRE.test(key); const splitAttrs = attrs => { const allAttrs = Object.keys(attrs); - const eventAttrs = []; - const extraAttrs = []; + const eventAttrs = {}; + const onEvents = {}; + const extraAttrs = {}; for (let i = 0, l = allAttrs.length; i < l; i++) { const key = allAttrs[i]; if (isOn(key)) { - eventAttrs.push({ [key[2].toLowerCase() + key.slice(3)]: attrs[key] }); + eventAttrs[key[2].toLowerCase() + key.slice(3)] = attrs[key]; + onEvents[key] = attrs[key]; } else { - extraAttrs.push({ [key]: attrs[key] }); + extraAttrs[key] = attrs[key]; } } - return { events: eventAttrs, extraAttrs }; + return { onEvents, events: eventAttrs, extraAttrs }; }; const camelizeRE = /-(\w)/g; const camelize = str => { @@ -93,7 +96,7 @@ const getSlotOptions = ele => { return componentOptions ? componentOptions.Ctor.options || {} : {}; }; const getOptionProps = instance => { - return (instance.$ && instance.$.vnode && instance.$.vnode.props) || instance.props || {}; + return (instance.$ && instance.$.vnode ? instance.$.vnode.props : instance.props) || {}; }; const getComponent = (instance, prop, options = instance, execute = true) => { const temp = instance[prop]; @@ -182,14 +185,9 @@ const getKey = ele => { }; export function getEvents(child) { - let events = {}; - for (let key in child) { - if (/^on/.test(key)) { - key = key.toLowerCase(); - events[key] = child[key]; - } - } - return events; + const { $attrs } = child; + return splitAttrs($attrs).events; + // let events = {}; // if (child.componentOptions && child.componentOptions.listeners) { // events = child.componentOptions.listeners; @@ -217,19 +215,9 @@ export function getListeners(context) { return (context.$vnode ? context.$vnode.componentOptions.listeners : context.$listeners) || {}; } export function getClass(ele) { - let data = {}; - if (ele.data) { - data = ele.data; - } else if (ele.$vnode && ele.$vnode.data) { - data = ele.$vnode.data; - } - const tempCls = data.class || {}; - const staticClass = data.staticClass; + const props = (isVNode(ele) ? ele.props : ele.$attrs) || {}; + let tempCls = props.class || {}; let cls = {}; - staticClass && - staticClass.split(' ').forEach(c => { - cls[c.trim()] = true; - }); if (typeof tempCls === 'string') { tempCls.split(' ').forEach(c => { cls[c.trim()] = true; @@ -246,13 +234,8 @@ export function getClass(ele) { return cls; } export function getStyle(ele, camel) { - let data = {}; - if (ele.data) { - data = ele.data; - } else if (ele.$vnode && ele.$vnode.data) { - data = ele.$vnode.data; - } - let style = data.style || data.staticStyle; + const props = (isVNode(ele) ? ele.props : ele.$attrs) || {}; + let style = props.style || {}; if (typeof style === 'string') { style = parseStyleText(style, camel); } else if (camel && style) { @@ -307,13 +290,7 @@ export function mergeProps() { } function isValidElement(element) { - return ( - element && - typeof element === 'object' && - 'componentOptions' in element && - 'context' in element && - element.tag !== undefined - ); // remove text node + return element && element.__v_isVNode && typeof element.type !== 'symbol'; // remove text node } export { diff --git a/components/_util/vnode.js b/components/_util/vnode.js index c11f17daa..42cd099a6 100644 --- a/components/_util/vnode.js +++ b/components/_util/vnode.js @@ -1,59 +1,7 @@ -import { filterEmpty, parseStyleText } from './props-util'; -import classNames from 'classnames'; +import { filterEmpty } from './props-util'; +import { cloneVNode } from 'vue'; -export function cloneVNode(vnode, deep) { - const componentOptions = vnode.componentOptions; - const data = vnode.data; - - let listeners = {}; - if (componentOptions && componentOptions.listeners) { - listeners = { ...componentOptions.listeners }; - } - - let on = {}; - if (data && data.on) { - on = { ...data.on }; - } - - const cloned = new vnode.constructor( - vnode.tag, - data ? { ...data, on } : data, - vnode.children, - vnode.text, - vnode.elm, - vnode.context, - componentOptions ? { ...componentOptions, listeners } : componentOptions, - vnode.asyncFactory, - ); - cloned.ns = vnode.ns; - cloned.isStatic = vnode.isStatic; - cloned.key = vnode.key; - cloned.isComment = vnode.isComment; - cloned.fnContext = vnode.fnContext; - cloned.fnOptions = vnode.fnOptions; - cloned.fnScopeId = vnode.fnScopeId; - cloned.isCloned = true; - if (deep) { - if (vnode.children) { - cloned.children = cloneVNodes(vnode.children, true); - } - if (componentOptions && componentOptions.children) { - componentOptions.children = cloneVNodes(componentOptions.children, true); - } - } - return cloned; -} - -export function cloneVNodes(vnodes, deep) { - const len = vnodes.length; - const res = new Array(len); - for (let i = 0; i < len; i++) { - res[i] = cloneVNode(vnodes[i], deep); - } - return res; -} - -export function cloneElement(n, nodeProps = {}, deep) { +export function cloneElement(n, nodeProps = {}, override = true) { let ele = n; if (Array.isArray(n)) { ele = filterEmpty(n)[0]; @@ -61,87 +9,9 @@ export function cloneElement(n, nodeProps = {}, deep) { if (!ele) { return null; } - const node = cloneVNode(ele, deep); - // // 函数式组件不支持clone https://github.com/vueComponent/ant-design-vue/pull/1947 - // warning( - // !(node.fnOptions && node.fnOptions.functional), - // `can not use cloneElement for functional component (${node.fnOptions && node.fnOptions.name})`, - // ); - const { props = {}, key, on = {}, nativeOn = {}, children, directives = [] } = nodeProps; - const data = node.data || {}; - let cls = {}; - let style = {}; - const { - attrs = {}, - ref, - domProps = {}, - style: tempStyle = {}, - class: tempCls = {}, - scopedSlots = {}, - } = nodeProps; + const node = cloneVNode(ele, nodeProps); - if (typeof data.style === 'string') { - style = parseStyleText(data.style); - } else { - style = { ...data.style, ...style }; - } - if (typeof tempStyle === 'string') { - style = { ...style, ...parseStyleText(style) }; - } else { - style = { ...style, ...tempStyle }; - } - - if (typeof data.class === 'string' && data.class.trim() !== '') { - data.class.split(' ').forEach(c => { - cls[c.trim()] = true; - }); - } else if (Array.isArray(data.class)) { - classNames(data.class) - .split(' ') - .forEach(c => { - cls[c.trim()] = true; - }); - } else { - cls = { ...data.class, ...cls }; - } - if (typeof tempCls === 'string' && tempCls.trim() !== '') { - tempCls.split(' ').forEach(c => { - cls[c.trim()] = true; - }); - } else { - cls = { ...cls, ...tempCls }; - } - node.data = Object.assign({}, data, { - style, - attrs: { ...data.attrs, ...attrs }, - class: cls, - domProps: { ...data.domProps, ...domProps }, - scopedSlots: { ...data.scopedSlots, ...scopedSlots }, - directives: [...(data.directives || []), ...directives], - }); - - if (node.componentOptions) { - node.componentOptions.propsData = node.componentOptions.propsData || {}; - node.componentOptions.listeners = node.componentOptions.listeners || {}; - node.componentOptions.propsData = { ...node.componentOptions.propsData, ...props }; - node.componentOptions.listeners = { ...node.componentOptions.listeners, ...on }; - if (children) { - node.componentOptions.children = children; - } - } else { - if (children) { - node.children = children; - } - node.data.on = { ...(node.data.on || {}), ...on }; - } - node.data.on = { ...(node.data.on || {}), ...nativeOn }; - - if (key !== undefined) { - node.key = key; - node.data.key = key; - } - if (typeof ref === 'string') { - node.data.ref = ref; - } + // cloneVNode内部是合并属性，这里改成覆盖属性 + node.props = override ? { ...node.props, ...nodeProps } : node.props; return node; } diff --git a/components/_util/vue-types/utils.js b/components/_util/vue-types/utils.js index d1e556d91..fe2b117b3 100644 --- a/components/_util/vue-types/utils.js +++ b/components/_util/vue-types/utils.js @@ -84,7 +84,9 @@ export const withDefault = function(type) { // isFunction(def) 关注 https://github.com/vuejs/vue-next/pull/1291 合并发版本后可删除 this.default = - isArray(def) || isPlainObject(def) || isFunction(def) + isArray(def) || + isPlainObject(def) || + (isFunction(def) && type._vueTypes_name === 'function') ? function() { return def; }