从以下7个维度谈谈v-show和v-if的区别和相同处

1）控制手段

使用v-show时，标签始终存在，只是更改了元素的display，而v-if直接将元素从dom树中移除了。v-show操纵样式，而v-if直接操纵dom元素。v-if是条件渲染，如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块，而v-show不管初始条件是什么，元素总是会被渲染，且只是简单修改元素的css样式——display属性。

2）编译过程

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

3）编译条件

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

·v-show由false变成true时不会触发组件的生命周期

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

4）性能消耗

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

5）原理分析

vue的渲染逻辑——首先把模板转换成可执行的js代码（也就是render函数），然后执行render函数处理模板转换成html，而这个过程中v-if和v-show就会被解析。v-if就像if()else()一样动态的区创建元素，注意在这个过程中如果v-if控制的是组件，切换过程中条件块内的事件监听器和子组件会被适当地销毁和重建，也就是会触发组件和子组件的生命周期，如

    // v-if在转换成render时会被解析成字符串

    if('v-if===true''){

           document.createElement('div')

           appendChild()

            ......

        }else{

   removeChild()

    .....

    }

v-show初始化时为false时会添加style="display=none"，为true时移除display=none，注意并不是把display变为block，因为要保持元素style的原始性，不管初始条件是什么，元素总是会被渲染，也就是说如果找到了v-show，不管是true还是false都会失去创建元素，然后在css操作

   //v-show在转换成render时会被解析成字符串

   if('v-show'){

       //创建元素

   letele=document.createElement('div');

       //控制显隐

       if('v-show'===true){

           ele.setAttribute('diaplay','block')

        }else{

           ele.setAttribute('diaplay','none')

        }

}

6）应用场景

·当需要在显示与隐藏之间进行频繁的切换操作时，就使用v-show

·如果在运行时条件很少改变，就使用v-if

·v-if相比v-show开销更大（直接操作dom节点的增加与删除）

7）共同点

·两者都用来控制元素的显示与隐藏

·当两者都为false时，都不会占据页面位置

·当条件变化时都会触发过渡效果