computed与asyncComputed

computed不支持异步；asyncComputed支持异步

使用场景：在用户注册或者其他信息新增的过程中，通常会在填写表单，并且检验通过之后，才允许点击确认按钮，由于form表单校验的方法执行的过程是异步的，所以，此时不能使用computed，经过查找资料，此处可使用asyncComputed代替，具体使用过程如下，

废话不多说，直接上代码

<el-form ref="formRef" :model="formData" :rules="rules">
    <el-form-item prop="name">
        <el-input v-model="formData.name" />
    </el-form-item>
    <el-form-item>
        <!--  此处许需要在填写完表单信息，并且检验通过之后才允许点击 -->
         <el-button type="primary" :disabled="!disabledFlag">测试禁用</el-button>
    </el-form-item>
</el-form>


import type { FormInstance, FormRules } from 'element-plus'
import { asyncComputed } from '@vueuse/core'

const formRef = ref<FormInstance>()
const formData = ref({
  name: ''
})
// 规则校验
const rules = ref<FormRules>({
  name: [
    { required: true, message: '请输入姓名', trigger: 'change' },
    { pattern: /^(-)?[0-9]*$/g, message: '请输入数字', trigger: 'change' }
  ]
})

const disabledFlag = asyncComputed(async () => {
  const { name } = formData.value
  if (name) {
    // validate是一个异步函数
    const res = await formRef.value?.validate((valid) => {
      return valid
    })
    return res
  } else {
    return false
  }
})