Vuev-show和v-if的区别及使用场景一、v-show和v-if的区别在vue中，v-show和v-if都可以控制元素在页面上显示还是隐藏.操作css元素的display属性，这样使用v-show隐藏元素时，元素的dom节点还在页面中；v-if的显示和隐藏，就是对整个dom元素进行增减。有一个v-if的切换部分编译/卸载的过程，在切换过程中对内部事件监听器和子组件进行适当的销毁和重构；v-show只是对cssdisplay属性的简单操作v-if是真正的条件渲染，它会保证切换过程中的条件块内的事件监听器和子组件被适当销毁和重建。只有当渲染条件为假时，才会执行任何操作，直到它为真。当v-show从false变为true时，不会触发组件的生命周期。当v-if从false变为true时，会触发组件的beforeCreate。,create,beforeMount,mounted生命周期钩子，当它们从true变为false时触发组件的beforeDestory和destroyed方法。在性能消耗方面，v-if的切换消耗较高；v-show初始渲染消耗较高2.v-show和v-if使用场景v-if和v-show可以控制dom元素在页面上的显示和隐藏。与v-show相比，v-if的开销更大（直接操作dom节点的增删改查），如果需要非常频繁的切换，还是使用v-show比较好。如果条件在运行时很少改变，最好使用v-if。3、v-show和v-if的原理分析无论v-show是true还是false，Elements都会被渲染。在源码中，如果绑定了v-show命令的元素外层有一层transition，就会执行transition。如果el外层没有嵌套transition，则直接设置el.style.displayexport。constvShow:ObjectDirective={beforeMount(el,{value},{transition}){el._vod=el.style.display==='无'？'':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{//附加这个分支'scodegen节点到v-if根。constparentCondition=getParentCondition(ifNode.codegenNode!)parentCondition.alternate=createCodegenNodeForBranch(branch,key+ifNode.branches.length-1,上下文)}}})})复制代码
