perf: form

Author: tangjinzhou

components/form/Form.jsx

@@ -149,6 +149,11 @@ const Form = {
       this.$forceUpdate();
     },
   },
+  updated(){
+    if(this.autoFormCreate || this.form) {
+      this.form.cleanUpUselessFields();
+    }
+  },
   methods: {
     onSubmit(e) {
       const { $listeners } = this;

components/form/__tests__/message.test.js

@@ -1,8 +1,9 @@
 import { mount } from '@vue/test-utils';
+import { asyncExpect } from '@/tests/utils';
 import Form from '..';
 
 describe('Form', () => {
-  it('should display two message', () => {
+  it('should display two message', async () => {
     const rules = [
       {
         pattern: /^\w+$/,
@@ -16,6 +17,7 @@ describe('Form', () => {
     let myForm;
     const Form1 = Form.create()({
       render() {
+        myForm = this.form;
         return (
           <Form>
             <Form.Item label="Account">
@@ -27,13 +29,11 @@ describe('Form', () => {
     });
 
     const wrapper = mount(Form1, {
-      propsData: {
-        wrappedComponentRef: inst => {
-          myForm = inst.form;
-        },
-      },
+      sync: false,
     });
-    myForm.validateFields();
+    await asyncExpect(()=>{
+      myForm.validateFields();
+    }); 
 
     wrapper.vm.$forceUpdate();
     expect(wrapper.html()).toMatchSnapshot();

components/vc-form/demo/dynamic-fields.js

@@ -200,9 +200,78 @@ const Form3 = {
   },
 };
 
+const Form4 = {
+  mixins: [BaseMixin],
+  props: {
+    form: Object,
+  },
+  data() {
+    return {
+      useInput: true,
+    };
+  },
+  methods: {
+    onSubmit(e) {
+      e.preventDefault();
+      this.form.validateFields((error, values) => {
+        if (!error) {
+          console.log('ok', values);
+        } else {
+          console.log('error', error, values);
+        }
+      });
+    },
+    changeUseInput(e) {
+      this.setState({
+        useInput: e.target.checked,
+      });
+    },
+  },
+
+  render() {
+    const { getFieldError, getFieldDecorator } = this.form;
+    return (
+      <form onSubmit={this.onSubmit}>
+        <h2>situation 4</h2>
+        {this.useInput
+          ? getFieldDecorator('name', {
+            initialValue: '',
+            trigger: 'input',
+            rules: [
+              {
+                required: true,
+                message: "What's your name 1?",
+              },
+            ],
+          })(<input />)
+          : getFieldDecorator('name2', {
+              initialValue: '',
+              trigger: 'input',
+              rules: [
+                {
+                  required: true,
+                  message: "What's your name 2?",
+                },
+              ],
+            })(<input />)}
+        <div>
+          <label>
+            <input type="checkbox" checked={this.useInput} onInput={this.changeUseInput} />
+            toggle decorator name
+          </label>
+          {(getFieldError('name') || []).join(', ')}
+          {(getFieldError('name2') || []).join(', ')}
+        </div>
+        <button>Submit</button>
+      </form>
+    );
+  },
+};
+
 const WrappedForm1 = createForm()(Form1);
 const WrappedForm2 = createForm()(Form2);
 const WrappedForm3 = createForm()(Form3);
+const WrappedForm4 = createForm()(Form4);
 
 export default {
   render() {
@@ -211,6 +280,7 @@ export default {
         <WrappedForm1 />
         <WrappedForm2 />
         <WrappedForm3 />
+        <WrappedForm4 />
       </div>
     );
   },

components/vc-form/src/createBaseForm.jsx

@@ -98,16 +98,12 @@ function createBaseForm(option = {}, mixins = []) {
             },
           },
       mounted() {
-        this.wrappedComponentRef(this.$refs.WrappedComponent);
         this.cleanUpUselessFields();
       },
       updated() {
-        this.wrappedComponentRef(this.$refs.WrappedComponent);
+        // form updated add for template v-decorator
         this.cleanUpUselessFields();
       },
-      destroyed() {
-        this.wrappedComponentRef(null);
-      },
       methods: {
         updateFields(fields = {}) {
           this.fieldsStore.updateFields(mapPropsToFields(fields));
@@ -636,14 +632,20 @@ function createBaseForm(option = {}, mixins = []) {
         const formProps = {
           [formPropName]: this.getForm(),
         };
-        const props = getOptionProps(this);
+        const {wrappedComponentRef, ...restProps} = getOptionProps(this);
         const wrappedComponentProps = {
           props: mapProps.call(this, {
             ...formProps,
-            ...props,
+            ...restProps,
           }),
           on: $listeners,
           ref: 'WrappedComponent',
+          directives: [
+            {
+              name: 'ant-ref',
+              value: wrappedComponentRef,
+            },
+          ],
         };
 
         return WrappedComponent ? (

package.json

@@ -188,7 +188,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "shallow-equal": "^1.0.0",
     "shallowequal": "^1.0.2",
-    "vue-ref": "^1.0.3",
+    "vue-ref": "^1.0.4",
     "warning": "^3.0.0"
   }
 }