FormCreate v2 到 v3 升级指南
提示
FormCreate v3 版本基于 Vue 3.0 构建,尽管功能与 v2 版本大致相同,但有一些重要的变更和不兼容项需要注意。
FormCreate v3 对比 v2 版本在一些功能和配置项上做了调整,以更好地支持 Vue 3 的新特性。以下是 v2 到 v3 升级过程中需要关注的变化和调整。
移除配置项
在 v3 版本中,以下配置项已被移除,因为它们在 Vue 3 中不再适用:
- attrs: 在 Vue 3 中不再需要单独配置 attrs,可以直接在 props 中处理。
- scopedSlots: 已被 slots 替代,Vue 3 使用 slot 统一管理插槽。
- domProps: 不再单独使用 domProps,可以直接在 props 中处理。
- hook: Vue 3 中生命周期钩子已重命名且使用方式不同。
- nativeOn: 不再需要 nativeOn,可以直接在 on 中处理原生事件。
- nativeEmit: 原生事件与 Vue 事件已统一,不再需要区分,可以直接在 emit 中处理。
功能调整
为了更好地支持 Vue 3 和现代 JavaScript 语法,FormCreate v3 版本对部分功能进行了调整:
- 修改
validate
、validateField
、submit
返回值:
这些方法现在返回 Promise
,您可以使用 then 和 catch 来处理异步操作结果。
js
fApi.validate().then(() => {
// 表单验证通过
}).catch(e=>{
// 表单验证失败
});
- 修改
v-model
为v-model:api
: 在 Vue 3 中,v-model 支持多个参数,因此 v-model:api 用于绑定 FormCreate 实例。
vue
<form-create v-model:api="fApi" :rule="rule" />
- 修改
value.sync
为v-model
: Vue 3 中不再使用 sync 修饰符,直接使用 v-model 进行双向绑定。
vue
<form-create v-model="formData" :rule="rule" />
不兼容项
在升级到 v3 时,以下功能和特性将不再兼容:
不支持 iview: v3 版本不再支持 iview(View UI),建议迁移到其他支持的 UI 框架,如 Element Plus、Ant Design Vue 等。
移除 template 生成组件方式: template 方式在 v3 中已被移除,建议使用 JSX 或函数式组件来生成动态组件。
移除 formCreate.init 方法: v3 版本中 formCreate.init 方法已被移除,所有的初始化操作建议使用 Vue 组件的生命周期钩子进行管理。