vue--v-if和v-show的区别（个人项目中的理解应用）

在面试的时候，一道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个页面，每次点击只

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

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