本篇文章对比一下Vue指令v-show 和 v-if，介绍一下v-show 和 v-if 的区别，并聊聊v-show 和 v-if 使用场景，希望对大家有所帮助！
一、v-show 和 v-if 的区别
在 vue 中 v-show 和 v-if 都可以控制元素是否在页面中现实。
v-show 的显示隐藏是操作元素css的 display 属性，所以使用 v-show 来隐藏元素的时候，元素的 dom 节点依旧还在页面中；v-if 的显示隐藏则是将 dom 元素整个添加或删除。
v-if 的切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show 只是简单的操作css的 display 属性。
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 使用场景
v-if 与 v-show 都能控制 dom 元素在页面的显示和隐藏
v-if 相比 v-show 开销更大的（直接操作 dom 节点增加与删除），如果需要非常频繁地切换，则使用 v-show 较好，如果在运行时条件很少改变，则使用 v-if 较好
三、v-show 和 v-if 原理分析
v-show 不管是 true 还是 false，元素总是会被渲染，源码中如果绑定了 v-show 指令的元素外层套了一层 transition 的话，就执行 transition ，如果 el 外层没有嵌套 transition 的话，就直接设置 el.style.display
exportconstvShow:ObjectDirective<VShowElement>={beforeMount(el,{value},{transition}){el._vod=el.style.display==='none'?'':el.style.displayif(transition&&value){transition.beforeEnter(el)}else{setDisplay(el,value)}},mounted(el,{value},{transition}){if(transition&&value){transition.enter(el)}},updated(el,{value,oldValue},{transition}){//…},beforeUnmount(el,{value}){setDisplay(el,value)}}
v-if 是在抽象语法树转成代码字符串的时候被获取来做判断的，如果 v-if 为false ，render 函数生成的 vnode 不会包含要渲染的节点，而是一个注释的 vnode 节点作为占位
exportconsttransformIf=createStructuralDirectiveTransform(/^(if|else|else-if)$/,(node,dir,context)=>{returnprocessIf(node,dir,context,(ifNode,branch,isRoot)=>{//…return()=>{if(isRoot){ifNode.codegenNode=createCodegenNodeForBranch(branch,key,context)asIfConditionalExpression}else{//attachthisbranch'scodegennodetothev-ifroot.constparentCondition=getParentCondition(ifNode.codegenNode!)parentCondition.alternate=createCodegenNodeForBranch(branch,key+ifNode.branches.length-1,context)}}})})
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/30758.html；
