VUE 踩坑合集 - 技术栈

一、更新element的table时，报错或发生重复渲染情况

复制代码

[Vue warn]: Duplicate keys found during update: "0" Make sure keys are unique.

通常是因为有重复的key值导致的

修改建议：

1.排除重复key值

2.另外新增一个单独的key值（table中写：row-key="uuid"。这里的uuid对应的是你新增的key值的名称）

二、useForm + setSchema 中频繁 remove / hidden schema，会导致表单内部 schema 引用错位，比如把B组件的值渲染到A组件上。

首先我们需要搞清楚原理：

schema 数组是有顺序的

每个 schema 会被映射为一个 vnode

remove 会直接改变 schema 数组结构

Vue 在 diff vnode 时：

如果 key 不稳定

或 schema 被频繁 splice

就会发生组件复用错位

第一步：禁止再用 remove（关键） *

所有 remove 全部删掉，只用 hidden

但是使用hidden会导致值还在，只是看不见，还占据了位置。导致表单中出现空白。

第二步：隐藏 + 清值 + 清校验 + span = 0

这个时候我们已经完成了一大半改动，但是提交的时候你会发现，字段隐藏了，但是如果是必填字段，它还是会走rules的校验规则。

第三步：隐藏的时候顺便清空该字段的rule规则，显示的时候加回去

创建一个rules副本，存储初始的rule规则。

在隐藏是删除掉对应字段的rule规则，显示时从rules副本把对应规则放回去。

即可完美解决问题

三、VUE中跨页面，数组的定义还是会产生对应的影响

例如：我在A页面引用了B页面，传入TEMP数组

复制代码

watch(
  () => props.TEMP,
  async (row) => {
   console.log("回显", row)
   },
  {
    deep:true,
    immediate: true
  }

deep: true = 只要对象 / 数组内部任何一层发生变化，watch 都会触发

我们需要去除deep：true

watch + deep = 极其危险，只能用于监听，不能写复杂逻辑

表单回显数据 = 必须深拷贝

表单内部操作的数据，绝不能直接绑 props

有几个方法可以避免数组引用到同一数组

1.浅拷贝

复制代码

B = [...A]
//或者
B = A.slice()

2.如果是对象数组

复制代码

B = A.map(item => ({ ...item }))