这次来分享前端的九条bug吧

分享bug的目的

开发过程中bug常相伴, 不能修复或者无法复现就忽略这些问题, 所以计划每当我遇到9个有价值有思考的bug就会统一分享出来, 以此来扩展性的思考工作本身, 不断的提高自己的意识, 毕竟能力的提高遇到的bug一定不同, 而且如果遇到bug越来越少只能说明自己的工作任务与学习任务在’原地踏步,且不饱和’, 既然如此就靠bug来见证自己的成长吧.

1: element-ui: el-card标签

bug现象: 有一天测试突然跟我说, 一个当前版本根本没动过的页面发生bug, 页面有些数据为空, 有些按钮点击无效. bug追查: 第一分析: 那好吧根本没动过的页面出问题那就是历史遗留问题或者后端返回出了问题, 那就去排查一番吧,但是排查的过程令我傻眼, 后台返回了值但是莫名其妙的一直在报’空值’的错, 而且这是一个三年的老项目还是其他项目组转过来了, 说实话代码很烂很乱, 使用了大量的mixin还有部分逻辑进入了node_modules里面还没有文档, 这个时候只能暴力破解了, 打个debugger一步一步的追查下去, 真的定位了很久发现了关键点, 是某个子组件没有得到传值, 然后这个子组件还会往父组件传一个值, 这才导致了父组件里面的某些值为空从而报错, 看了看向线上的项目没有这些问题, 这有我这个版本有问题那么一定是有人动了这一页的代码, 或者整体环境的某个全局属性被篡改了那问题涉及就广了, 调出gitlab当前页的上一个版本代码,(这里是一个小技巧)把当前代码commit, 生成缓存然后把上个版本的代码覆盖当前代码, 在deff里面就可以看到两版本代码的差异了, 我发现原本根标签是

…

, 而这次的是, 思维有点堵塞:就换了个标签而已, 不涉及任何的属性与变量, 怎么可能导致数据崩溃?? bug原因: 罪魁祸首是这个this.$parent, 原来上一个同学在组件里面是通过父级组件的实例来获取父级传过来的数据的, 那么问题明了了标签成为了他的父级, 那么它理所当然的取不到更上一级的数据了, 所以获取到的数据就是空的,'凶手’就是它. bug解决:

1. 改this.$parent为’行间传值’的形式, 并测试是否好用.
2. 寻找全局是否还有类似的情况, 一一改正.
3. 找到添加的同学, 说明原因, 以及询问他是否还如此改变过其他地方的代码, 放弃其他工程也出现类型的情况.

bug思考: this.$parent或者$