在一個項目開發時，經常用到input組件或者textarea組件，當前項目使用的時antdv@1.7.8。提交測試時，測試人員反饋AInput和ATextarea組件沒有限制字符長度導致保存時數據庫插入報錯，因此需要在前端需要限制字符長度。由于項目已經開發過半，因此想通過使用設置默認值方式設置maxLength屬性。

確定方案

1. 普通input最大長度默認設置為64
2. textarea最大長度設置為200

最終實現

再main.js文件中增加代碼

import Antd, { Input } from "ant-design-vue";
Input.props.maxLength.default = 64;

然后手動再將每個ATextarea單獨增加:max-length="200"

踩坑過程

1. 開始想通過修改默認值的方式分別修改AInput、ATextarea兩類組件，代碼如下：
   src\main.js

import Antd, { Input } from "ant-design-vue";
Input.props.maxLength.default = 64;
Input.TextArea.props.maxLength.default = 200;

2. 運行結果
   結果發現AInput和ATextarea組件的maxlength都變成了200

3. 原因查找
   \node_modules\ant-design-vue\es\input\TextArea.js使用函數式組件編寫，核心代碼如下

import inputProps from './inputProps';
var TextAreaProps = _extends({}, inputProps, {
  autosize: PropTypes.oneOfType([Object, Boolean]),
  autoSize: PropTypes.oneOfType([Object, Boolean])
});

export default {
  name: 'ATextarea',
  inheritAttrs: false,
  props: _extends({}, TextAreaProps),
  render: function render() {
     var props = {
       props: _extends({}, getOptionProps(this), {
         prefixCls: prefixCls,
         inputType: 'text',
         value: fixControlledValue(stateValue),
         element: this.renderTextArea(prefixCls),
         handleReset: this.handleReset
       }),
       on: getListeners(this)
     };
     return h(ClearableLabeledInput, props);
   }
}

ATextarea組件的props屬性使用的_extends({}, TextAreaProps)進行淺拷貝

\node_modules\ant-design-vue\es\input\Input.js也使用函數式組件編寫，代碼如下：

import inputProps from './inputProps';
export default {
  name: 'AInput',
  inheritAttrs: false,
  props: _extends({}, inputProps),
  render: function render() {
    var props = {
      props: _extends({}, getOptionProps(this), {
      }),
      on: getListeners(this)
    };
    return h(ClearableLabeledInput, props);
  }
};

同樣AInput組件的props屬性也使用的_extends({}, inputProps)進行淺拷貝

node_modules\ant-design-vue\es\input\inputProps.js定義了props屬性

import PropTypes from '../_util/vue-types';
export default {
  maxLength: PropTypes.number,
};

結論：PropTypes.number是引用類型，因此被淺拷貝后實際都是一個地址。無論給AInput還是ATextarea的maxlength賦默認值最終是相互影響的，所以導致上邊的問題。

node_modules\ant-design-vue\es\_util\vue-types\index.js定義vue類型的公共代碼

var VuePropTypes = {
  get number() {
    return toType('number', {
      type: Number
    }).def(currentDefaults.number);
  },
}

node_modules\ant-design-vue\es\_util\vue-types\utils.js定義vue類型的公共代碼

/**
 * Adds `isRequired` and `def` modifiers to an object
 * @param {string} name - Type internal name
 * @param {object} obj - Object to enhance
 * @returns {object}
 */
export var toType = function toType(name, obj) {
  Object.defineProperty(obj, '_vueTypes_name', {
    enumerable: false,
    writable: false,
    value: name
  });
  withRequired(obj);
  withDefault(obj);//定義默認值，實際上為obj添加了一個def方法，通過該方法定義默認值
  if (isFunction(obj.validator)) {
    obj.validator = obj.validator.bind(obj);
  }
  return obj;
};

/**
 * Adds a `def` method to the object returning a new object with passed in argument as `default` property
 * @param {object} type - Object to enhance
 */
export var withDefault = function withDefault(type) {
  Object.defineProperty(type, 'def', {
    value: function value(def) {
      if (def === undefined && this['default'] === undefined) {
        this['default'] = undefined;
        return this;
      }
      if (!isFunction(def) && !validateType(this, def)) {
        warn(this._vueTypes_name + ' - invalid default value: "' + def + '"', def);
        return this;
      }
      this['default'] = isArray(def) || isPlainObject(def) ? function () {
        return def;
      } : def;

      return this;
    },
    enumerable: false,
    writable: false
  });
};