当前位置：首页 > news >正文

vue3+ts的几个bug调试

news 2025/6/27 7:09:43

由于编译问题，把几个type检查给关闭了，否则错误太多。

1）第一个检查出的问题，拼写错误数组的length，写成了lengh。

2）数组的对象引用。

torStatus = Array(8).fill({ ...defaultStatus }) as TorStatus[];

这种方式会创建一个长度为 8 的数组 torStatus，其中每个元素都引用了同一个对象，即 defaultStatus 对象的副本。这里的 { ...defaultStatus } 会生成一个新的对象副本，但在 fill 操作中，所有 8 个元素将引用这个同一个新对象。

因此，修改 torStatus[0] 会影响数组中的其他元素，因为它们实际上引用的是同一个对象（即数组中所有的对象是同一个内存地址）

必须改成

torStatus = Array(8).fill(null).map(() => ({ ...defaultStatus })) as TorStatus[];

这样，map() 会确保为每个数组元素生成一个新的对象副本，因此修改 cannyEtorStatus[0] 时，不会影响到数组中的其他元素。

3）UI中值的调试方法，

一般是用console.log打印，

还可以直接在UI中显示

调试方法直接在ui中显示值
<div>{{record.FloorNum + "," + (Number(column.dataIndex.slice(-2)) - 1) + "," + record.torStatus[Number(column.dataIndex.slice(-2)) - 1].incar }}
</div>

4)用watch监控变量时，一个变量是有效的，另一个变量更新后属性不怎么变化。

改成一样的，添加 deep: true 后生效。

watch(() => props.cannyEtorGroupStatus,(newStatus, oldStatus) => {console.log("in watch props.torGroupStatus");if (newStatus != undefined) {console.log("in watch props.torGroupStatus,if (newStatus != undefined)");updateDataSourceByEtorGroupStatus(newStatus);}},{ immediate: true, deep: true }  // 初始化时也会调用一次
);

因为watch 只会监听浅层数据变化（即监听对象或数组的引用变化），而不会对对象内部的属性变化进行监听。

当你在 watch 中添加 deep: true 选项时，表示你希望对 深层次的数据变化 进行监听。也就是说，它会递归地监控对象或数组的每一个属性或者元素的变化，无论是对象的某个属性，还是数组的某个元素发生变化，都会触发回调函数。