v-if 和 v-show 的区别

1.方式上的区别

v-if是通过控制页面中的dom节点的存在与否来控制元素的显示与隐藏，举个例子

 <div class="box" ></div>

 

 <div class="box" v-if="false"></div>

 从上面可以看出，如果给这个元素设置了v-if="false"属性时，这个元素的dom节点将被删除

  <div class="box" v-show="false"></div>

 而给元素设置  v-show="false"属性时，dom节点依然存在，但是css样式被修改了

2.性能消耗

所以我们不难得出这样的结论，当给一个页面的节点设置属性v-id时，每次加载都要重新加载一遍这个dom元素，所以有更高的切换消耗；而v-show并不会删除dom节点，所以除了第一次加载需要把这个dom元素加载出来以外，之后的每一次切换都不会额外加载这个元素，因此，v-show的初始渲染消耗也会更多一些。

3.使用建议

一般建议在一个页面反复被切换的时候，使用v-show，不经常被切换的时候，使用v-if。