v-show和v-if有什么区别和共同之处？使用的场景分别是什么？

1、v-show和v-if的共同点

        他们都是控制元素的显示和隐藏的，我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的，都能控制元素在页面是否显示。但是v-if控制的是元素在结构中的创建与销毁，v-show是控制元素在页面中CSS中的 display 属性中的属性值为 none  还是  blok。

 当他们的表达式为 true 的时候 v-if就会创建该结构  v-show就会控制结构的css样式为none且block

2、v-if和v-show的区别

• 控制手段不同
• 编译过程不同
• 编译条件不同

控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换

编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

• v-show 由false变为true的时候不会触发组件的生命周期

• v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法

性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

3、v-show、v-if原理

•         v-show 不管初始条件是什么，元素总是会被渲染
•         v-if  在实现上比v-show要复杂的多，因为还有else else-if 等条件需要处理，这里我们也只摘抄源码中处理 v-if 的一小部分。

返回一个dom节点，render函数通过表达式的值来决定是否生成DOM

4、v-if、v-show 使用场景  

• v-if 与 v-show 都能控制dom元素在页面的显示
• v-if 相比 v-show 开销更大的（直接操作dom节点增加与删除）
• 如果需要非常频繁地切换，则使用 v-show 较好
• 如果在运行时条件很少改变，则使用 v-if 较好

最后

以上就是眼睛大小霸王为你收集整理的v-show和v-if有什么区别和共同之处？使用的场景分别是什么？的全部内容，希望文章能够帮你解决v-show和v-if有什么区别和共同之处？使用的场景分别是什么？所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。