Vue中v-show和v-if有什么区别？使用场景分别是什么？

•   个人网站:【紫陌】【笔记分享网】
• 想寻找共同学习交流、共同成长的伙伴，请点击【前端学习交流群】

目录

1.v-show

 2.v-if

 3.v-if和v-show区别

---

1.v-show

v-show严格意义上说“条件隐藏”。浏览器首先不管三七二十一，把HTML元素先渲染起来，符合条件就显示，不符合条件display就为none，不显示，但是元素还在那。

1.     写法：v-show="表达式"
2.     适用于：切换频率较高的场景。
3.     特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

            
			<h2 v-show="false">大家好我是{{name}}h2>
			<h2 v-show="2 === 2">大家好我是{{name}}h2>

只显示一个

​

 2.v-if

v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回true值的时候被渲染。

1. 写法：
2.             (1).v-if="表达式"
3.             (2).v-else-if="表达式"
4.             (3).v-else="表达式"
5.      适用于：切换频率较低的场景。
6.      特点：不展示的DOM元素直接被移除。
7.      注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

             
if="false">大家好我是{{name}}
 
			 <h2 v-if="1 === 1">大家好我是{{name}}h2> 

​

 演示一些v-if配合v-esle

            <div v-if="n === 1">Angulardiv>
			<div v-else-if="n === 2">Reactdiv>
			<div v-else-if="n === 3">Vuediv>
			<div v-else>我爱紫陌div>

            <h2>当前的n值是:{{n}}h2>
			<button @click="n++">点我n+1button>



            <script type="text/javascript">
    
		        const vm = new Vue({
			        el:'#root',
			        data:{
				    name:'紫陌',
				    n:0
			        }
		        })
	        script>

​ ​​​​

 3.v-if和v-show区别

1.  实现方式：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
2. 编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
3. 编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译; v-show是在任何条件下，无论首次条件是否为真，都被编译，然后被缓存，而且DOM元素保留；
4. 性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
5. 使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。