此系列均为工作或生活中遇到的各种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的运行机制中的微任务和宏任务导致的，这个问题等后续时间充足时再考证吧