引言
v-if，v-show是我们在vue中使用频率相当高的一个指令了，对于这个问题你真的做到了解了吗？
当我收到这个问题的时候，作为一名前端小白来说首先想到的就是 :
v-if：只有值是true的时候元素才会进行渲染v-show：不管值是true还是false，元素总是会被渲染需要频繁切换的场景使用v-show性能会更高
我们经常在网上看到的一些回答也是这样的，让我们来看一下Vue官网是如何解释的？
vue官网：v-if VS v-show
这里讲到了v-if是惰性的，v-show是元素渲染之后根据css切换是否显示的。
v-if是“真正”的条件渲染，那么vue是如何切换v-if条件块内的元素是否显示的呢？
v-show是如何基于css切换显示与否的呢？
v-if
我们在vueDemo中写如下一个 v-if 条件块看一下
<div class="if" v-if="false">v-if</div>
我们可以看到这里设置v-if=false的时候，会在当前的模板中创建一个注释节点（占位节点），等到v-if的值为true的时候，才会创建一个真实的节点。
这里涉及到了Vue的虚拟DOM的diff算法不太了解的同学可以看下这篇文章，讲的非常详细让虚拟DOM和DOM-diff不再成为你的绊脚石
这里的注释/占位节点用来标识元素在页面中的位置，以便在diff中patch的时候直接在该位置渲染该元素。
v-show
我们同样在在vueDemo中写如下一个 v-show 条件块看一下
<div class="show" v-show="true">v-show</div>
<div class="show" v-show="false">v-show</div>
可以看到，我们将v-show设置为false的时候，将条件块元素设置为
display:none;,像是vue官网讲的一样，通过设置css切换元素是否显示。
那么我们知道通过设置css切换元素是否显示有三种方法
- visibility:hidden;
- display:none;
- overflow:hidden;
通过比较显然第三种overflow是不符合这里的使用条件的，但是这里为什么要用display:none;呢？
display:none; VS visibility:hidden;
对于这里为什么要用display:none;而不是visibility:hidden;我们先来看下这两个属性MDN的说明。
简单的来说就是
- display:none; 元素将会从DOM树中移除，而且其所有的子元素都不会显示，我们不能在这里进行事件或者DOM操作。
- visibility:hidden; 元素会被隐藏，并且会占据原来的位置，整体布局不会改变，我们可以操作DOM，子元素设置为visible还是可以显示。
看到这里实际上我还是有点疑惑的，因为v-show适合频繁切换的场景，但是这里操作display:none会带来回流的问题呀。
实际上，如果v-show用visibility:hidden;的话，相当于此元素变成透明，还是会占据原来的位置。
这里v-show的应用场景是不能占用原来的位置的，所以这里用了display:none;
总结
v-if值为false时，在该位置创建一个注释节点，用来标识元素在页面中的位置。在值发生改变的时候，通过diff，新旧组件进行patch，从而动态显示隐藏。
v-show值为false时，通过设置元素的css，display:none来控制元素是否展示。
对于一个属性命令，我们应该尽量的去了解它的原理，为什么要这样做？这样做有什么好处？还有没有更好的实现方式？
结语
前端小白，记录自己的一些学习心得，如果有不对的地方希望大家可以指正，在评论区留言讨论。感谢 ！
