Vue+TS项目结合Vuelidate与Vuetify触发最大调用栈溢出如何解决

架构老林

2026-10-6

问题原因

版本混用：你同时使用了Vuelidate 0.x的核心包vuelidate和仅适配Vuelidate 2.x的验证器包@vuelidate/validators，两者API不兼容，会触发内部初始化错误。
配置位置错误：你将Vuelidate要求的顶级配置项validations写在了computed计算属性内部，导致Vuelidate初始化时递归触发计算属性执行，形成死循环，最终抛出栈溢出错误。

修复步骤

卸载不兼容的依赖包

npm uninstall @vuelidate/validators

修正组件导入逻辑
将组件中验证器的导入语句替换为Vuelidate 0.x的内置验证器路径：

// 替换前
// import { required } from "@vuelidate/validators";
// 替换后
import { required } from 'vuelidate/lib/validators'

调整配置项位置
将validations配置从computed中移出，作为组件的顶级选项，和data、methods、computed平级，同时因为你已经在main.ts中全局注册了Vuelidate，不需要再手动混入validationMixin，可以删除相关代码。
修正后组件核心结构示例：

export default {
  // 可删除，全局注册后无需手动混入
  // mixins: [validationMixin],
  data() {
    return {
      quantity: null,
    }
  },
  // validations为顶级配置项
  validations: {
    quantity: { required }
  },
  methods:{
    saveValue(){
      console.log('saving..')
    }
  },
  computed: {
    quantityErrors() {
      const errors = [];
      if (!this.$v.quantity.$dirty) return errors;
      !this.$v.quantity.required && errors.push("Qty is required");
      return errors;
    }
  }
}