form表单 a-input 组件内使用v-decorator指令后，input输入框不能输入且出现卡死情况

[SangeCoder]

• [ ] I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.4.10

Environment

macOS

Reproduction link

Steps to reproduce

我项目采用typescript 使用@component装饰组件 组件内使用v-decorator指令后，input输入框不能输入东西是什么问题？？

What is expected?

我项目采用typescript 使用@component装饰组件 组件内使用v-decorator指令后，input输入框不能输入东西是什么问题？？

What is actually happening?

我项目采用typescript 使用@component装饰组件 组件内使用v-decorator指令后，input输入框不能输入东西是什么问题？？

[rupertqin]

I have encountered the problem as well !

[tangjinzhou]

1、首先请提供有效的复现链接， 2、目测问题是 @component 的问题，虽然我不清楚你怎么用的，解决方案：createForm放在created声明周期中

[liuguangzhen01]

我们公司（太平洋保险）项目里遇到同样的问题，form表单input使用v-decorator指令，快速输入文本，会卡顿，使用vue-devTools的perfermence查看大量dom元素重新渲染，去掉v-decorator指令后，不会出现卡顿，仅渲染当前input DOM元素

[dingshaohua-com]

ts 表单中，只要添加v-decorator 页面就会假死

<template>
  <div :class="$style.login">
    <div :class="$style.box">
      <div :class="$style.left">
        <div :class="$style.sysNameCh">法官助手后台管理系统</div>
        <div :class="$style.sysNameEn">JUDICIAL ASSISTANT BACK OFFICE MANAGEMENT SYSTEM</div>
      </div>
      <div :class="$style.right">
        <div :class="$style.welcome">欢迎登录</div>
        <div :class="$style.line" />
        <div :class="$style.iptGroup">
          <a-form layout="inline" :form="form" @submit="handleSubmit">
            <a-form-item label="用户名">
              <a-input
                placeholder="用户名"
                v-decorator="['userName1', { rules: [{ required: true, message: '请输入用户名!' }] }]"
              >
                <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
              </a-input>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class Login extends Vue {
  private form = this.$form.createForm(this, { name: "horizontal_login" });

  private handleSubmit(e: any) {
    e.preventDefault();
    this.form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
      }
    });
  }
}
</script>
<style lang="less" module>
@import url("./style.less");
</style>

[dingshaohua-com]

我们公司（太平洋保险）项目里遇到同样的问题，form表单input使用v-decorator指令，快速输入文本，会卡顿，使用vue-devTools的perfermence查看大量dom元素重新渲染，去掉v-decorator指令后，不会出现卡顿，仅渲染当前input DOM元素

代码修改如下就好了

<template>
  <div :class="$style.login">
    <div :class="$style.box">
      <div :class="$style.left">
        <div :class="$style.sysNameCh">法官助手后台管理系统</div>
        <div :class="$style.sysNameEn">JUDICIAL ASSISTANT BACK OFFICE MANAGEMENT SYSTEM</div>
      </div>
      <div :class="$style.right">
        <div :class="$style.welcome">欢迎登录</div>
        <div :class="$style.line" />
        <div :class="$style.iptGroup">
          <a-form layout="inline" :form="form" @submit="handleSubmit">
            <a-form-item>
              <a-input
                placeholder="用户名"
                v-decorator="decorators.userName"
              >
                <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
              </a-input>
            </a-form-item>
            <a-form-item >
              <a-input-password
                v-decorator="decorators.password"
                type="password"
                placeholder="Password"
              >
                <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
              </a-input-password>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
              >登录</a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class Login extends Vue {
  private decorators = {
    userName: [
      "userName",
      { rules: [{ required: true, message: "Please input your Password!" }] },
    ],
    password: [
      "password",
      { rules: [{ required: true, message: "Please input your Password!" }] },
    ],
  };

  private form: any;

  private created(){
    this.form = this.$form.createForm(this, { name: "horizontal_login" });
  }

  private handleSubmit(e: any) {
    e.preventDefault();
    this.form.validateFields((err: any, values: any) => {
      if (!err) {
        console.log("Received values of form", values);
      }
    });
  }
}
</script>
<style lang="less" module>
@import url("./style.less");
</style>

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[fenyuluoshang]

我们公司（太平洋保险）项目里遇到同样的问题，form表单input使用v-decorator指令，快速输入文本，会卡顿，使用vue-devTools的perfermence查看大量dom元素重新渲染，去掉v-decorator指令后，不会出现卡顿，仅渲染当前input DOM元素

代码修改如下就好了

<template>
  <div :class="$style.login">
    <div :class="$style.box">
      <div :class="$style.left">
        <div :class="$style.sysNameCh">法官助手后台管理系统</div>
        <div :class="$style.sysNameEn">JUDICIAL ASSISTANT BACK OFFICE MANAGEMENT SYSTEM</div>
      </div>
      <div :class="$style.right">
        <div :class="$style.welcome">欢迎登录</div>
        <div :class="$style.line" />
        <div :class="$style.iptGroup">
          <a-form layout="inline" :form="form" @submit="handleSubmit">
            <a-form-item>
              <a-input
                placeholder="用户名"
                v-decorator="decorators.userName"
              >
                <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
              </a-input>
            </a-form-item>
            <a-form-item >
              <a-input-password
                v-decorator="decorators.password"
                type="password"
                placeholder="Password"
              >
                <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
              </a-input-password>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
              >登录</a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class Login extends Vue {
  private decorators = {
    userName: [
      "userName",
      { rules: [{ required: true, message: "Please input your Password!" }] },
    ],
    password: [
      "password",
      { rules: [{ required: true, message: "Please input your Password!" }] },
    ],
  };

  private form: any;

  private created(){
    this.form = this.$form.createForm(this, { name: "horizontal_login" });
  }

  private handleSubmit(e: any) {
    e.preventDefault();
    this.form.validateFields((err: any, values: any) => {
      if (!err) {
        console.log("Received values of form", values);
      }
    });
  }
}
</script>
<style lang="less" module>
@import url("./style.less");
</style>

我尝试了一下，配置:selfUpdate=“true”，同样也解决了卡死，猜测问题可能来自循环渲染

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.