Vue3组合式APIresetFields的用法

Vue3的组合式API提供了`resetFields`函数，用于重置表单字段的值和验证状态。它接受一个可选的表单字段对象作为参数，如果提供了该参数，则只会重置该表单字段对象中的字段值和验证状态，否则将重置整个表单。

使用示例：

import { ref, reactive } from 'vue'

export default {
  setup() {
    const form = reactive({
      username: '',
      password: '',
      rememberMe: false
    })

    const usernameRef = ref(null)
    const passwordRef = ref(null)

    const resetForm = () => {
      // 重置整个表单
      form.username = ''
      form.password = ''
      form.rememberMe = false

      // 重置验证状态
      usernameRef.value.resetValidation()
      passwordRef.value.resetValidation()
    }

    return {
      form,
      usernameRef,
      passwordRef,
      resetForm
    }
  }
}

在这个示例中，我们使用了`reactive`函数创建了一个名为`form`的响应式对象，包含了表单的所有字段。同时，我们还使用了`ref`函数创建了两个引用类型的变量`usernameRef`和`passwordRef`，分别用于访问用户名和密码输入框的验证状态。

在`resetForm`函数中，我们通过修改`form`对象的属性来重置表单的字段值，然后使用引用类型的变量调用`resetValidation`函数来重置相应字段的验证状态。如果不需要重置验证状态，可以省略这一步。

最后，我们将`form`对象、`usernameRef`和`passwordRef`引用以及`resetForm`函数作为返回值暴露给组件的模板。在模板中，我们可以通过`v-model`指令双向绑定表单字段的值，并将`ref`属性绑定到相应的输入框上，以便在`resetForm`函数中访问它们的验证状态。