Vue.js两个基本指令v-if和v-show学习

v-if和v-show的区别？
对于很多初学者来说，总是有很多疑问，再使用v-if和v-show两者该用哪个？什么场景该用，有点对困难选择症状的码友们残忍，今天我们来说说这两者的区别及一般使用场景。

v-if和v-show相同点：
它们都是用于动态的控制dom的元素隐藏和显示；
v-if和v-show不相同点:
v-show 只会节点上进行对于元素进行隐藏，dom上还是有这个元素的，直接给该元素添加display：none样式;
v-if 则会完全的移除或者添加这个元素；

---

那大家看到这里应该对这两个基本指令有个基本了解，我们再看看实际代码是怎么实现的？

可以看到上图我们再dom元素标签里面都有添加对应的指令v-if及v-show，我们通过起一个对应自己要的指令名，在下面的data里面通过布尔类型的判断去显示或者隐藏，默认true 为显示，false为隐藏；
我们来看看两个默认为true，正常显示，dom元素正常挂载。

下面我们分别来看看v-if及v-show分别为false情况下，dom元素会如何显示呢？
v-if:false-元素直接移除

v-show:false-元素直接隐藏，给元素直接添加display:none样式*
学到这里应该都比较清晰的知道了,我们来分析一下哪种比较合适：
v-if会有更高的性能消耗，它能确保条件块内的事件监听器和子组件适当地被销毁和重,使用场景比较适合判断是否加载，需要时候再加载，减少服务器压力；
v-show就比较，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换，比较适合频繁切换的场景，客户端操作建议使用，比较流畅
总结：如果操作很频繁，那就使用v-show ，如果极少改变：建议还是使用v-if;