浅谈v-if和v-show的运用(理论分析)

场景一: 虚拟滚动根据不同状态动态渲染自定义Dom

 现在在列表中有个状态列,比如说订单状态。

       

  这个状态根据不同的数量显示不同的样式,由于虚拟滚动是动态计算行来实时渲染更新的,在频繁的动态渲染下,这里如果用v-if的话会导致有的行因为虚拟滚动计算不及时而导致有的行块的样式会发生变异,乍一看好像逻辑没啥问题但是结果却不是我们想象的那样。对于需要频繁更新dom的情况下使用v-show不会出现这种问题,而且在性能上也远远优于v-if。

场景二:重绘容器类组件

   地图组件和画布组件在我们的前端开发中应该很频繁的见到,对于这类容器类组件,一般都是给一个容器盒子,容器盒子设置一个id成为地图或画布类的容器。在一些业务场景需要对地图做显示控制时,如果这里我们用v-show，那么就会出现一个问题，那就是之前的容器并没有消失,而是出现了多个容器盒子。出现这种情况的时候我们就需要用v-if销毁之前的组件,但是并不是每种情况都是这样,在我们完成实际的业务开发时还得具体情况具体分析。

场景三:特殊组件的显示与隐藏

  对于一些特殊组件的时候往往会令我们很头疼,比如el-tabs，如果有个场景,我们需要根据不同的角色权限来展示对应的el-tab-pane。

​
          <el-tab-pane  v-permission="509"  label="用户管理" name="first">
            <systemuser />
          </el-tab-pane>
          <el-tab-pane  v-permission="518" label="角色管理" name="second">
            <systemrole />
          </el-tab-pane>

​

但是往往结果与现实南辕北辙。

在没有权限的情况下,隐藏掉的仅仅是tab-pane里面的内容，而不是整个tab-pane,直接用v-show居然没有起到作用，经过查找是说v-show起作用的本质是display:none,而因为td的display: table-cell;权限高于display:none,所以v-show失效。对于这种情况我们只能去使用v-if去控制组件的显示与隐藏。

场景四:组件退出保留历史数据

 比如说我有一个模态框，里面可能是一个表单或者一个表格等等等等,在一些业务需求下,我们希望在退出这个模态框时下次进来的还是保留的上一次操作的数据,对于这种情况下我们是必须要使用v-show的,不过这里需要值得注意的一点是,使用v-show是在父组件创立的时候就开始渲染模态框里面的内容了，如果里面的一些数据是操作父组件的内容时传递过来的时候，那么这个组件就会报错,这里我们需要时刻注意值与组件的对应关系,必须先有值在渲染模态框,用v-if倒是不会上诉的问题，但是这不是不符合我们上诉的的业务场景需求嘛。

总结:小小的指令也蕴含着大大的学问,对于频繁刷新dom，保留历史数据的情况下,我们必须要使用v-show。对于重绘容器类组件的时候,我们必须使用v-if。对于一些特殊情况还得特别分析,尤其是在一些ui组件中，搞得不好就会坑你一把。对于普通情况，,用v-if也行,v-show也行,您怎么开心怎么来。不是v-if不好用，而是用v-show可以让我在业务的海洋里面更加的海阔天空嘛。