在vue2项目中，在重复密码输入完后，登录表单校验修改新密码，重复密码不会再次校验的解决办法及实时监听watch的缺点

在重复密码输入完后，登录表单校验修改新密码，重复密码不会再次校验的解决办法

需要监听的代码：

    <el-dialog width="500px" title="修改密码" :visible.sync="showDialog">
      <!-- 放置表单 -->
      <!-- ref：获取正给表单的实例 -->
      <el-form ref="passForm" label-width="120px" :model="passForm" :rules="rules">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="passForm.oldPassword" placeholder="请输入旧密码" show-password size="small" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passForm.newPassword" placeholder="请输入新密码" show-password size="small" @blur="handleNewPasswordBlur" />
        </el-form-item>
        <el-form-item label="重复密码" prop="confirmPassword">
          <el-input v-model="passForm.confirmPassword" placeholder="请输入重复密码" show-password size="small" />
        </el-form-item>
        <el-form-item>
          <el-button size="min" type="primary">确认修改</el-button>
          <el-button size="min">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

data() {
    return {
      showDialog: false,
      passForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      showPasswdChange: false,
      rules: {
        oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
        newPassword: [
          { required: true, message: '新密码不能为空', trigger: 'blur' },
          {
            min: 6,
            max: 16,
            message: '长度应在 6 到 16 个字符',
            trigger: 'blur'
          },
          { validator: (rule, value, callback) => {
            if (value === this.passForm.oldPassword) {
              callback(new Error('新密码不能与旧密码一致'))
            } else if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[._~!@#$^&*])[A-Za-z0-9._~!@#$^&*]{6,16}$/g.test(value)) {
              callback()
            } else {
              callback(new Error('请输入包含英文字母大小写、数字和特殊符号的 6-16 位组合'))
            }
          }, trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请再输入一遍新密码', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (value !== this.passForm.newPassword) {
              callback(new Error('两次输入密码不一致!'))
            } else {
              callback()
            }
          }, trigger: 'blur' }
        ]
      }
    }
  },

解决办法：

如果要监视新密码的变化并进行校验，使用watch属性监听passForm.newPassword的变化，并在回调函数中调用repeatValidate方法进行重复密码的校验。

watch: {
   'passForm.newPassword': function(newValue) {
      this.$refs['passForm'].validateField('confirmPassword')
   }
}

但是按照上面的watch监听新密码只要有变化就会监听，用户体验不好

所以改成当新密码输入框失去焦点后再监听重复密码的变化，可以通过监听新密码输入框的blur事件来实现。以下是修改后的代码示例：

methods: {
  handleNewPasswordBlur() {
      this.$refs['passForm'].validateField('confirmPassword');
  }
}

在模板中，为新密码输入框添加blur事件监听器，当新密码输入框失去焦点时，调用handleNewPasswordBlur方法来触发重复密码的校验：

<el-input v-model="passForm.newPassword" @blur="handleNewPasswordBlur" placeholder="请输入新密码" clearable></el-input>

实时监听watch的缺点

1. 性能消耗：实时监听watch会导致频繁的回调函数执行，可能会影响页面的性能，特别是在数据变化频繁的情况下。

2. 不必要的校验：在某些情况下，实时监听watch可能会导致不必要的校验，例如用户正在输入新密码时，反复触发重复密码的校验可能会让用户感到困扰。

3. 可能出现闪烁：如果数据变化频繁，实时监听watch可能会导致页面出现闪烁的情况，影响用户体验。

4. 可能引发循环更新：如果在watch中修改了数据，可能会引发循环更新的问题，导致程序出现异常。