Vue实现自定义表单组件的最佳实践及现有校验方案优化咨询

你的原有实现最大的性能问题在于每次视图更新都递归遍历完整组件树，当表单嵌套层级深、表单项多的时候开销会非常大。更优的方案是用依赖注入+主动注册的机制，只维护已注册的表单项列表，完全避免全量组件树遍历：

核心优化点 #

• 取消递归遍历逻辑，app-form通过provide暴露注册/注销方法，app-input挂载时主动注册到父级表单、卸载时主动注销
• app-form只需要维护已注册的表单项数组，校验时直接遍历该数组即可
• 可选择仅在表单项值变化、表单项增删时触发校验，不需要每次视图更新都执行校验逻辑

1. 修改后的app-form组件 #

模板（无需改动） #

<template>
  <div>
    <slot></slot>
  </div>
</template>

JS逻辑 #

export default {
  props: {
    value: Boolean
  },
  data() {
    return {
      isValid: true,
      // 维护已注册的合法表单项列表
      registeredItems: []
    }
  },
  // 向所有后代组件暴露注册/注销方法
  provide() {
    return {
      registerFormItem: this.registerFormItem,
      unregisterFormItem: this.unregisterFormItem
    }
  },
  methods: {
    registerFormItem(item) {
      // 只接收指定类型的表单项
      if (item.$options.name === 'app-input') {
        this.registeredItems.push(item)
        // 新增表单项后重新校验
        this.checkValidation()
      }
    },
    unregisterFormItem(item) {
      const idx = this.registeredItems.findIndex(i => i === item)
      if (idx > -1) {
        this.registeredItems.splice(idx, 1)
        // 删除表单项后重新校验
        this.checkValidation()
      }
    },
    checkValidation() {
      // 直接遍历已注册的表单项，无需递归
      this.isValid = this.registeredItems.every(item => item.checkValidation())
      this.$emit('input', this.isValid)
    }
  }
}

2. 修改后的app-input组件 #

模板（无需改动） #

<input
  :value="selfValue"
  @input="onInput"
/>

JS逻辑 #

export default {
  name: 'app-input',
  props: {
    value: [String, Number],
    rules: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selfValue: this.value,
      errorMsg: '' // 可用来存储校验错误提示
    }
  },
  // 注入父级表单的注册/注销方法
  inject: ['registerFormItem', 'unregisterFormItem'],
  mounted() {
    // 挂载时主动注册到父表单
    this.registerFormItem(this)
  },
  // Vue2环境请替换为beforeDestroy
  beforeUnmount() {
    // 卸载时主动注销
    this.unregisterFormItem(this)
  },
  watch: {
    value(newVal) {
      this.selfValue = newVal
    },
    // 输入值变化时自动触发校验，不需要等待表单视图更新
    selfValue() {
      // 可根据需求添加防抖，避免输入过程中频繁校验
      this.$nextTick(() => {
        this.$parent.checkValidation?.()
      })
    }
  },
  methods: {
    checkValidation() {
      let valid = true
      this.errorMsg = ''
      for (const rule of this.rules) {
        const result = rule(this.selfValue)
        if (typeof result === 'string') {
          valid = false
          this.errorMsg = result
          break
        }
      }
      return valid
    },
    onInput(e) {
      this.selfValue = e.target.value
      this.$emit('input', this.selfValue)
    }
  }
}

可选优化 #

• 如果不需要实时校验，可删除app-input的selfValue监听，仅在表单提交时手动调用app-form的checkValidation方法即可，性能更佳
• 可扩展支持更多表单项类型，只需要在app-form的注册逻辑中添加对应的组件名判断即可，无需修改其他逻辑

内容的提问来源于stack exchange，提问作者kswang