Bug解决方案之渲染列表为空
此系列均为工作或生活中遇到的各种bug,为记录bug而生的,不希望其他人因为这些bug而纠结
v-for后渲染列表为空(偶发性)
背景介绍
因为工作原因,其他部门的同事交接了一个某管理系统,因为这个项目时因为甲方还未完全验收通过
2022年底验收通过
,而且我这个项目组是新成立的,专门做甲方这边的相关的项目,其他部门的项目就交接过来了,这个系统也是很简单的系统,是查询某地区的税收情况的一个系统,整个系统就是一个导出、查询的功能,相对比较简单
问题描述
这个问题是在熟悉代码时的某天发现的,触发的还挺频繁的,但也不是百分百触发,当我搜索某个企业名称后,将企业名称删除重新搜索,就会出现下图的情况,所有的信息都渲染不出来,只有几个筛选条件和几个按钮
这里只是拿企业名称举例子,其他收索条件收索后也是一样的问题,除非刷新页面,才会恢复正常,否则会一直是空白状态
解决方法
刚看到这个问题时,我以为是后端服务出了问题,就打开了控制台,发现后端响应码是200,并且有数据返回
这时候我发现事情远远没有那么简单,于是就开始寻找bug之旅,首先我找到了发生问题的代码,看了一下,这一块代码也非常简单,是一个v-for遍历父组件的数组,然后进行渲染的,那就奇怪了,这里的逻辑明明这么简单,为什么会渲染失败呢?于是我在页面多渲染了一个item数组中的每一项
,等到重新复现这个bug时候,通过截图对比,我对比处理在key中绑定的值在是undefined,于是我重新换了一个唯一的值来绑定key,测试了几次,发现还是会有,唯一的好消息是它触发的没有这么频繁了,于是又开始了找bug之旅,当对比完里边的字段,并没有发现什么异常的问题,于是就开始怀疑是后端数据赋值到数组时出现了问题,这时候就打开了Vue.js devtools
这个插件,来证实一下是不是赋值的问题
通过上图看到赋值是没有问题的,并且单独渲染item也是可以渲染出来的,就是页面结构渲染不出来,到了这里又陷入了沉思,还有什么原因导致数据未渲染呢?正当我对于这个bug头疼时,突发奇想,既然找不到bug的原因,那么我再加强一层判断就不会触发这个bug了呢
因为这种方法会导致v-if和v-for同时存在,比较消耗性能,所以第一时间还是打消了这个念头
但因为项目快要验收了,又加上用断点调试找了几十分钟,没有丝毫进展,最后还是用了v-if,再次测试,发现bug消失了
总结反思
虽然最后是用了v-if解决了当下的问题,但我觉得这并不是解决问题的方法,经过后面认真思考,觉得可能是因为JS的运行机制中的微任务和宏任务导致的,这个问题等后续时间充足时再考证吧
![](https://ftp.stackoverflow.wiki/bolo/background/butterfly/comment.png)