vue中的v-if和v-show的区别以及使用场景

vue中显隐方法常用两种，v-show和v-if，但这两种是有区别的。
实现本质方法区别
v-show本质就是标签display设置为none，控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素
编译的区别
v-show其实就是在控制css
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
编译的条件
v-show都会编译，初始值为false，只是将display设为none，但它也编译了
v-if初始值为false，就不会编译了
性能
v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
用法
v-if更灵活，举个例子
//这个里面只会显示数组角标大于等于2的内容

  <li v-for="(item, index) in scene" v-if="index <= 2" @click="openScene(item, item.pid)">
      <span>{{ item.name }}</span>
  </li>

//这个上面为true的内容，下面为false的内容（当然这个也可以用v-show实现的）

 <li v-for="(item, index) in scene" v-if="item.share" @click="openScene(item, item.pid)">
     <span>{{ item.share }}</span>
 </li>
 <li v-else>
      <span>{{ item.share }}</span>
 </li>

那如何来选择什么时候用v-if或者是v-show呢：
如果我们使用v-show进行判断渲染，则div标签和里面的img是会生成并渲染的，但是我们注意到浏览器在我们的内联样式中添加了display:none属性，所以实质上v-show标签是存在的，只是浏览器帮我们隐藏了而已；实际上浏览器只是根据判断条件在更改内联样式，条件为真的时候内联样式display:block；条件为假的时候内联样式更改为display:none; v-show实际上比v-if的性能更高，因为v-show只是动态的更改样式而不需要增删DOM元素，但是遇到多种情况分支判断的时候v-show是不能和v-else连用的，碰到这种场景使用v-show的处理办法就是重新再用v-show写另外的逻辑判断；
总结：
(1)、v-if和v-show用于视图层进行条件判断视图展示
(2)、v-if的原理是根据判断条件来动态的进行增删DOM元素，v-show是根据判断条件来动态的进行显示和隐藏元素，频繁的进行增删DOM操作会影响页面加载速度和性能，由此我们可以得出结论：
当您的项目程序不是很大的时候，v-if和v-show都可以用来进行判断展示和隐藏（这种场景使用v-if只是影响不大，并不是没有影响）；
当您的项目程序比较大的时候，不推荐使用v-if来进行判断展示和隐藏，推荐使用v-show；
(3)、只有v-if能和v-else连用进行分支判断，v-show是不能和v-else连用的，如果出现多种条件场景的情况下，可以使用v-if来进行判断