vue2中，mounted生命周期钩子函数中使用Ant Design Vue的validateFields方法会再次触发template中的方法

Question

下面代码中，按钮上绑定的test方法会被触发两次：一次时vue初始化时渲染时会调用一次，另一次是当我在mounted生命周期钩子函数中调用Ant Design Vue中表单的validateFields方法时会再次触发按钮上的test方法。
不能理解为什么调用了validateFields会再次触发按钮上绑定的test方法，这是什么原理呢？

<template>
  <div class="layout-box">
    <a-form :form="accountForm" :label-col="{ span: 24 }" :wrapper-col="{ span: 24 }">
      <a-form-item :label="$t('lang.login.account')">
        <a-input
          :placeholder="$t('lang.login.accountPlaceholder')"
          v-decorator="['account', { rules: rules.account }]"
        ></a-input>
      </a-form-item>
      <a-form-item :label="$t('lang.login.password')">
        <a-input-password
          :placeholder="$t('lang.login.pwdPlaceholder')"
          v-decorator="['password', { rules: rules.password }]"
        ></a-input-password>
      </a-form-item>
    </a-form>

    <a-button class="form-btn" type="primary" :disabled="test()">
      {{ $t('lang.login.login') }}
    </a-button>
  </div>
</template>

<script>
import { test } from '@/utils/util'

export default {
  name: 'Login',
  data() {
    return {
      test,
      accountForm: this.$form.createForm(this, { name: 'login' }),
      rules: {
        account: [{ required: true, message: this.$t('lang.login.accountPlaceholder') }],
        password: [{ required: true, message: this.$t('lang.login.pwdPlaceholder') }],
      },
    }
  },
  mounted() {
    this.accountForm.validateFields()
  },
}
</script>

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

这个问题出现的原因在于Vue的响应式系统和事件触发机制。你在模板中使用的<a-button>上的test()函数，它会因为数据属性的改变（比如Vue组件重新渲染或者调用validateFields导致的内部数据状态变化）而重新触发。这主要是因为Vue的响应式系统检测到数据属性的变化时，会触发组件的重新渲染和更新。因此，如果test函数依赖于任何Vue组件的数据属性，那么在数据属性发生变化时，这个函数可能会被重新调用。在这种情况下，调用Ant Design Vue的validateFields方法可能导致组件内部数据状态的变化，从而触发按钮上的方法。

具体来说，你的代码中mounted()生命周期钩子函数中调用了validateFields()方法，这个方法会校验表单中的所有字段，如果在验证过程中有错误产生或者用户的行为（如点击提交按钮等）导致了数据状态的改变，可能都会重新渲染你的组件或者导致数据的响应式更新，从而使得绑定的按钮点击事件被再次触发。

为了解决这个问题，你可以尝试以下方法：

1. 确保你的test函数内部逻辑不会因为数据属性的变化而重新触发。如果可能的话，尝试将依赖于数据属性的逻辑提取到计算属性或者方法中，而不是直接在按钮上调用函数。这样可以避免因为数据属性的变化导致的函数重新触发问题。
2. 如果仍然无法解决问题，可以尝试在test函数的定义中包裹一层防抖函数或者使用其它节流手段来控制函数的触发频率，从而避免在不需要的情况下频繁地触发该函数。但这通常并不是最佳的解决方案，因为可能会引起其它的性能问题。这种方法只有在你知道这是一个不可避免的偶然现象时才会考虑使用。总的来说，尽量避免直接在按钮或其他交互元素上直接调用含有大量响应式逻辑的函数或者方法，这可能是问题发生的根本原因。