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

一、前言

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

二、场景

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

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

代码如下

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

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

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

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

区别如下:

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

三、感想

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

猜你喜欢

转载自blog.csdn.net/m0_59360516/article/details/133857641