computed与asyncComputed

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

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

废话不多说，直接上代码

    
        
    
    
        
         测试禁用
    



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

const formRef = ref()
const formData = ref({
  name: ''
})
// 规则校验
const rules = ref({
  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
  }
})