前端开发中易错点记录(持续更新...)

71 阅读2分钟

数组

1、空数组every永远为true,所以用来做判断时,首先应排除为空的情况

if (arr.length && arr.every(item => item.flag === true)) {
    console.log("全为true")
}

vue2

1、计算属性中的this问题
想使用vue实例,就不能使用箭头函数
参考:深入解析Vue2中的this指代:场景、原理与对比

vue3

el-dialog中使用el-form,关闭时重置表单项,将其值重置为初始值,并移除校验结果
这里的初始值是指form加载完全加载后的值;
意外现象:
当第一次点击修改时,form的初始值被修改,当关闭弹框前调用resetFields时,值会重置为修改后的值;
当第一次点击新增时,form还是之前mounted的值,关闭弹框前调用resetFields时,值会重置为初始值;
原因: 修改时,先给form赋值,此时由于弹框上隐藏的,页面中form还没有加载,等form加载时,它的初始值变成了修改后的值,之后调用resetFields,值会重置为修改后的值。
解决方法:
等form完全加载后再修改form的值,具体步骤:先显示弹框,再在nextTick中赋值。

// 显示:form开始加载,赋初始值
dialogVisible.value = true;
// 在nextTick方法里赋值,确保form已加载完。
nextTick(() => {
    // 修改form的值
})

项目调试

1、console.log未生效问题

1)浏览器控制台设置问题
默认级别设置为default默认 image.png 2)项目中或引入的插件重写了console.log方法

window.console.log = function() {}

解决办法
在开发者工具里全局搜索 console.log = 查看是否有内容,如果有,则说明方法被重写,注释掉之后,则日志可以在浏览器上正常显示。 如果没有,则可能是引入的插件、安装的包中重写了,可以在页面加载后代码运行之前运行如下代码。

origConsoleLog = console.log; 
// after the page loads 
setTimeout(() => { window.console.log = origConsoleLog; }, 2000);

2、npm link未生效

1)使用vite构建时,可以尝试删除node_modules文件夹下 .vite下的deps,然后重启项目