【Vue】v-if、v-show的区别

v-if、v-show  

相同点：判断条件决定是否渲染元素

不同：

1. v-if依赖于控制DOM节点（条件为假时卸载元素），而v-show是依赖于控制DOM节点的display属性（条件为假时元素还在）
2. 切换v-if模块时，Vue有一个局部编译/卸载过程，因为v-if中的模板可能包括数据绑定或者子组件，v-if是真是的条件渲染，它会确保条件块在切换时合适的销毁与重建条件块内的时间监听器和子组件。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 切换。
3. v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
4. v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
5. v-if适合运营条件不大可能改变（判断数据加载完成与否来显示加载图像，加载成功后这个组件的状态就不会改变了）；v-show适合频繁切换（根据导航栏切换组件）。

<div class="top">
  <page-title>电影</page-title>
  <ul class="topNav">
    <li :class="[showHot==1?'active':'']" @click="showHot=1">正在热映</li>
    <li :class="[showHot==0?'active':'']" @click="showHot=0">即将上映</li>
  </ul>
</div>
<div class="main">
  <hoting v-show="showHot==1"></hoting>
  <comming v-show="showHot==0"></comming>
</div>

data() {
    return {
      showHot:1
    }
  }