实际开发中遇到的一些小优化（sangfor篇-上）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情

小记录下在公司实际项目中遇到的bug或小优化吧，优化点一般是导师初审的时候指出，或在代码合并的时候组员review指出，小改一波，较于之前有更好的可读性与维护性。

table-item不显示（没给table高度导致）

描述：数据是这样的[{},{}] 对象数组形式，能获取到数据，能成功给 gridOptions 赋值，但就是显示不出

修复思路：

• 有自定义组件 SfTableOptions 和 useTableOptions hook辅助编码，最开始选第一个，打印 gridOptions 发现是undefined，然后用第二钟方法。
• 后面觉得数据从获取到赋值这一整个过程都没问题，打印的结果都理想，就猜测是内容高度不够问题。

其实像这种功能正常，数据流也很合理的错误，我犯过好几个，都在想是不是所用的hook或方法返回不对，往往遗忘了渲染的条件

组件复用过程

描述：认证算法和加密算法非无选项都用到了密码和确认密码小组件，属于高频使用了，在没复用之前，遇到的BUG有

• 因为在同一个form表单，ref值相同，这导致在做radio-switch表单检验的时候，校验规则不知现在监听的是那个item项，导致相同也会报错

解决方案：抽离公共代码，复用成组件，想法是：把ref和对应的disabled条件传入，在组件中利用组件的setData和getSubmitData方法拿到传入和传出的数据，在通过watch监听那两个input的值，进行ref.value.validate()的标红告警清除

<snmp-password
 	ref="X1"
:disabled="" />
    
//清除校验
watch(() => [A, B], v =>{
    ARef.value?.validate();
    BRef.value?.validate();
});

解决，但来了个需求，认证算法共用一个数据源，就是一个改，切换另一个radio也跟着改，用现在的组件实现比较复杂，因为得传入三个ref值，得对三个radio项进行判断，看是哪个传入，在渲染的时候对页面视图同步不方便，提交也多种分情况。

于是，进一步优化：认证算法共用一个数据源，利用v-model传入数据对象进去，子组件在渲染，这样就省去了提交的判断。

//将数据对象通过v-model传入
const A = ref({
    password: '',
    confirmPassword: ''
});

//子组件

//定义数据类型
const props = defineProps<{
    disabled: boolean;
    value: {
        password: string;
        confirmPassword: string;
    };
}>();

const emit = defineEmits(['input']);
const formData = computed({
    get() {
        return props.value || {
            password: '',
            confirmPassword: ''
        };
    },
    set(v) {
        emit('input', v);
    }
});

完美解决！过程实在艰辛，可以说是一波三折，折又折了，但收货还是很大的。

if else条件判断性能优化

有这么一个场景：foreach遍历原始表格数组，对要编辑的表格行进行key排查，改行不能先找到改行数据，修改时再看有无重名地址，最后提交，下面是待优化的，用了很多if-else条件判断

newGridData.forEach((value, index) => {
        const trapArray = newGridData.map(item => item.trapAddr);
        let same = trapArray.find(value => value == data.trapAddr);
        if (value.trapAddr === id) {
            if (data.trapAddr === id){
                newGridData[index] = data;
                isSend = true;
            } else if (same === undefined) {
                newGridData[index] = data;
                isSend = true;
        } else {
       		fail();
    	}
}

优化后，先对不满足的条件判断，接着退出，最后剩下的就是满足的，

if (value.trapAddr !== id) {
    return;
}
if (data.trapAddr !== id && typeof same !== 'undefined') {
    fail(tr('snmpOptMgt.edit'));
    return;
}
newGridData[index] = data;
isSend = true;

持续更新中...

去成为想成为的人吧，去想去的地方吧