首页 > 技术文章 > vue--v-if和v-show的区别(个人项目中的理解应用)

wd163 2020-03-11 16:15 原文

在面试的时候,一道vue基础到不能再基础的面试题叫做v-if与v-show的区别,当然答案网上一搜一大堆,基本两句话就能说明:

1.相同点:都是根据指令是否渲染该组件

2.不同点:v-if仅重新渲染当次,v-show相当于元素的display属性,只是样式上的显示或者隐藏。

这导致了它们的使用场景(不细致可以考虑不存在)不同,前者多用于使用渲染次数较少的环境,需要反复渲染的多用v-show,v-if会加大服务器压力等等。。

这里说项目当中遇到的几个场景:

1.使用v-if或者v-show做一个tab选项卡的切换

毫无疑问,这种场景下用v-show,因为一个选项卡中用户需要频繁切换,次数可能还相当大。当时在项目的需求当中,后端接口和前端这一块并不能做到tab1中的某个数据改变后,用户切换到tab2

后与这个数据相关的另一个数据即时改变,因为这两个tab是组件不是两个不同的页面,没法在create中重新刷新数据。

可行的方法是通过组件传值,可这样就很麻烦了,这里将父组件中的v-show换

成v-if,重新渲染当前组件,起到了一个局部渲染的作用。

2.需要用v-for渲染一组数据,data拿着一看600多条需要根据某一字段从大到小排列,一个屏幕才11,12条,很明显后边的就不用显示了,就显示前一百条吧,先v-if试试

 

 不让连用,换成v-show就好了

3.使用v-show做一个点击到footer的5个按钮时分别显示不同的页面,相当于大组件

页面上就像调转到几个不同的页面(常见的app那种),但这里需求其实是一个页面中展示的不同组件!

在做每个页面(其实是组件)右侧边栏有一个按钮一直存在,点击时左侧均能划出80%宽的其他组件,所以得在5个组件都引入这个组件,而这个组件又恰巧因为内部某一部分只能展示展示在这几个

组件中的个别组件,这里的问题就是每次点击footer切换组件时,左侧都会划出其他组件的里的cover(现象是这样)。

可行方法是把左侧划出的组件拆了重写,也要改父组件,就相当于把山都挖了,

恐怖,效果还未知。。。。打印组件传值时发现cover的flag为true打印了五次,感觉是flag被每个组件重复传值了,所以在父组件中将v-show改用v-if,就像是将五个组件转换成5个页面,每次点击只

传值一次,,,,,,,解决了。

至于之后可能出现的问题,先不想。。。不想就没有问题

推荐阅读