vue中的v-if和v-show的区别

v-if和v-show的区别是前端面试中常问的基础知识点，v-if、v-show顾名思义就是用来判断视图层展示效果的。那么具体是怎么展示呢？v-if和v-show的区别又是什么呢？
不同点:

控制手段不同：v-show是控制css的display是否为none来隐藏或展示，dom元素一直都是在的。而v-if显示隐藏是直接将整个dom元素添加或删除。
编译过程不同：v-show只是简单地基于css切换。而v-if的切换有一个局部编译/卸载的过程，切换过程中会销毁和重建内部的事件监听和子组件。
编译条件不同：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件被销毁和重建，只有渲染条件为真时才渲染。
v-show由false变为true的时候不会触发组件的生命周期。
v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false时触发组件的beforeDestory、destoryed方法。
v-if有更高的切换消耗，v-show有更高的初始渲染消耗。
如果需要频繁地切换，则v-show较好。
如果在运行时条件很少改变，则使用v-if较好。

下面是引用掘金的解释:

　　首先我们可以来看一下Vue中文社区说明文档的介绍:

　Vue中文社区说明文档中简单来说是：初始渲染的时候进行条件判断展示；

　　在实际开发中我们会经常使用到v-if和v-show来进行判断展示，我们可以这么理解：

    <div class="tc" v-if="pload && list.length<1" >
   <im g src="../assets/img/mall_none_order.png" />
</div>

上面的实例中，v-if的作用是通过pload和list.length是否<1来判断这个div是否展示，因为是并且关系，只有当pload和list.length<1两个成立都成立的时候这个div和里面的img才展示和生效，反之如果判断条件不成立的时候，v-if则不会展示；

    <div class="tc" v-show="pload && list.length<1"  >
   <im g src="../assets/img/mall_none_order.png" />
</div>

总结：
(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来进行判断

作者：有梦想的咸鱼前端
链接：https://juejin.cn/post/6844903967072206855
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

发表评论