v3中reactive中的小坑
“现在我们能造什么？能造桌子椅子，能造茶碗茶壶，能种粮食，还能磨成面粉，还能造纸，但是，一辆汽车、一架飞机、一辆坦克、一辆拖拉机都不能造。”
前两天在写一个比较痛苦的表单，大概是这种: 抽屉内的表单在点击不同radio时会显示不同的待选项，抽屉关闭时所有项要回到初始态。保存时要分别校验不同项下的内容，基础校验是不能为空。
也同之前一样在使用vue3的ref
小坑：关于reactive
const formData = ref({
name: ``,
type: 0,
// files: [],
'base-text-diff': {
baseFileOnly: []
},
'model-text-diff': {
modelFileOnly: [], //单
diffedFileList: []
},
'appoint-text-diff': {
specialList: [], //特定页文件
beforePointFileOnly: [], //特定页，指定前
afterPointFileOnly: [] //特定页，指定后
},
pointPageType: `specialPage`, // 特定页
diffPageType: [], // 比对页：目录封面印章
// 范文页码
specialPage1_start: 1,
specialPage1_end: 1,
// 比对页码
specialPage2_start: 1,
specialPage2_end: 1
})
由于表单太过复杂，且判断较多，于是摒弃了使用ui的表单校验方式，改为手动重置：
// 当修改任务类型后，重置文件列表
watch(
() => formData.value.type,
(n, o) => {
resetTaskType(n, o)
resetFileList()
}
)
const resetTaskType = (newval, oldval) => {
// console.log('oldval :>> ', oldval)
if (oldval === 2) {
formData.value.pointPageType = `specialPage`
formData.value.diffPageType = []
formData.value.specialPage1_start = 1
formData.value.specialPage1_end = 1
formData.value.specialPage2_start = 1
formData.value.specialPage2_end = 1
}
resetFileList()
}
// 重置所有绑定的文件数据
const resetFileList = () => {
formData.value.['base-text-diff'].baseFileOnly = []
formData.value.['model-text-diff'].modelFileOnly = []
formData.value.['model-text-diff'].diffedFileList = []
formData.value.['appoint-text-diff'].specialList = []
formData.value.['appoint-text-diff'].beforePointFileOnly = []
formData.value.['appoint-text-diff'].afterPointFileOnly = []
}
原本以为这样就ok了，毕竟虽然麻烦但很简单。但是发现它报错了，没有截图，总之就是报了个奇怪的错误
后来就尝试使用reactive声明变量。
第一次有机会使用，说不激动是不可能的，但是在我看来也就仅仅是将value去掉而已，但是在重置此变量时告警：reactive声明的是常量，无法更改
欺天啦！我声明的是const不假 但是reactive不是用来声明响应式变量的吗？？
退一步越想越气，于是翻了翻官方文档：
那该怎么做？
后来翻了翻解决方案，发现一般都是使用此方案：
// 本质上是遍历初始数据后将初始数据重新赋予reactive数据
声明初始化数据:
const baseForm = () => ({
name: ``,
type: 0,
// files: [],
'base-text-diff': {
baseFileOnly: []
},
'model-text-diff': {
modelFileOnly: [], //单
diffedFileList: []
},
'appoint-text-diff': {
specialList: [], //特定页文件
beforePointFileOnly: [], //特定页，指定前
afterPointFileOnly: [] //特定页，指定后
},
pointPageType: `specialPage`, // 特定页
diffPageType: [], // 比对页：目录封面印章
// 范文页码
specialPage1_start: 1,
specialPage1_end: 1,
// 比对页码
specialPage2_start: 1,
specialPage2_end: 1
})
//声明reactive变量:
const formData = reactive(baseForm())
// 重置reactive变量
const resetFormData = () => {
Object.keys(baseForm()).forEach((key) => {
formData[key] = baseForm()[key]
})
}
如何校验非表单数据？
上面说摒弃了校验表单，因而要自己实现校验功能，由于不同类型要有不同的校验数据，因而有了以下方式 ：
// 点击抽屉的确认按钮
const confirm = () => {
const checkError = valiteForm()
}
// 校验
const valiteForm = () => {
if (!formData.name) {
return { msg: `请输入用户名称` }
}
switch (formData.type) {
// 文本 对比
case 0:
if (!formData['base-text-diff'].baseFileOnly.length) {
return { msg: `未上传文本比对类型文件，请确认` }
}
break
case 1:
if (
!formData['model-text-diff'].modelFileOnly.length ||
!formData['model-text-diff'].diffedFileList.length
) {
const msgType = !formData['model-text-diff'].modelFileOnly.length ? `范文` : `比对`
return { msg: `未上传范本比对类型的${msgType}文件，请确认` }
}
break
// 指定页
case 2:
if (formData.pointPageType === `specialPage`) {
if (!formData.diffPageType.length) {
return { msg: `未选择特定页比对中的 比对页，请确认` }
}
if (!formData['appoint-text-diff'].specialList.length) {
return { msg: `未上传特定页比对中的比对文件，请确认` }
}
}
if (formData.pointPageType === 'pointPageNum') {
if (formData.specialPage1_end < formData.specialPage1_start) {
return { msg: `特定页比对中的范文页页码有误，请确认` }
}
if (formData.specialPage2_end < formData.specialPage2_start) {
return { msg: `特定页比对中的比对页页码有误，请确认` }
}
if (
!formData[`appoint-text-diff`].beforePointFileOnly.length ||
!formData[`appoint-text-diff`].afterPointFileOnly.length
) {
const msgType = !formData[`appoint-text-diff`].beforePointFileOnly.length
? '范文'
: '比对'
return { msg: `未上传特定页比对中的${msgType}文件，请确认` }
}
}
break
default:
break
}
}
//校验未通过时，会返回一个object，否则返回undefind,因而：
(//校验的方式多种多样，只需让用户感知有误即可，我们甚至可以模仿表单项下手动加一个警示语句如
)
const confirm = () => {
const checkError = valiteForm()
if (checkError) {
return MessagePlugin.warning(checkError.msg)
}
}
原本写到这里，只需将formdata数据返回给父组件然后再调用重置方法即可，然而还是有坑：
reactive异步问题
查看以下代码：
const confirm = () => {
const checkError = valiteForm()
if (checkError) {
return MessagePlugin.warning(checkError.msg)
}
emit('success', formData)
emit('update:visible', false)
resetFormData()
}
逻辑是发送父组件当前数据，随后关闭抽屉，随后重置表单，但是这样写是有误的,表现是发给父级的是空数据，这是由于重置方法是同步的，而emit则是异步的，原以为只会出现在reacthook中的问题而今出现在了vue中，因而又有了以下解决方案:
// 实测此方式可大幅减少包体积
import cloneDeep from 'lodash/cloneDeep'
const confirm = () => {
const checkError = valiteForm()
if (checkError) {
return MessagePlugin.warning(checkError.msg)
}
// 预先拷贝一份，同步
const formDataCopy = cloneDeep(formData)
//此时formDataCopy为用户填入数据
emit('success', formDataCopy)
emit('update:visible', false)
resetFormData()
}
至此坑就填完了，不过reactive在官方文档中已明确提示不建议继续使用，不明白的是为什么不可以使用ref.value[property]方式赋值，埋坑
以上。
