不要小看v-if与v-show，说说他们的区别吧

一、前言

起因首先是因为遇到了一个问题，表格数据加载不出来了，想要去解决他，后面发现控制台也有报错，就更想去解决他了，在解决的过程中，差点被带偏了，花了一点时间，在快没有头绪的时候，差点就去请求大佬的援助了的。后面冷静想想，灵机一动，觉得这里可能有问题，就改了，没想到还真的解决了这个问题，也算是误打误撞了，但通过这次经历，觉得基础还是很重要啊，一定要把基础给打牢啊！

二、场景

问题是这是个弹窗页面，点开弹窗，先显示单位统计的表格数据，此时我点地区统计，然后加载显示出来地区统计的数据，这个时候，我再点单位统计，也就是从地区统计切换到单位统计的时候，这个时候出问题了，单位统计的表格数据不出来了，但我通过查看接口，请求是有返回数据的，只是他切换胡不显示出来了。

就出现了上面的截图显示，但这是个问题，肯定要修复过来，不可能用户只看一次，不来回切换的吧。

代码如下

反正根据代码的逻辑我都走了一遍发现没什么问题，然后就觉得可能不是数据的问题，是渲染的问题。然后控制台又出现了如下报错。

我根据报错的位置信息去找了，没发现，全局搜索了includes也没有，然后这个时候就没什么思路了。也差点被这个报错信息给带偏了。

然后也问了高科技，给出了如下回答。

按照上面的都去检查了，也都没问题，倒是一个词渲染进了我的脑袋。然后就在想渲染的事情，反复查看代码，发现第一张图里“v-if”和“v-else-if”很是显眼，就想到了“v-if”和“v-show”的区别，就把这里都改成了“v-show”，结果发现果然这个问题解决了，也没有报错了。

区别如下：

我这里主要是第一点和最后一点，导致了这个问题，正是因为使用v-if切换时将整个表格都删除了，所以再切换回来的时候表格不显示，并且这里频繁切换，用v-show会更好，否则会有更高的切换消耗。

三、感想

通过这个事情，让我觉得其实还是不要忽略基础知识，一些难点往往就是这些基础知识累计起来的，基础掌握牢固了，解决问题才会更加得心应手！