## Vue指令v-if和v-show的区别

v-show 和v-if 是比较常用的Vue指令，经常用来判断渲染部分代码块，但两者具体的区别在哪里呢？

1. v-show

                  v-show指令的作用是：根据真假值切换元素的显示状态,是响应式的

                  语法表达v-show = " 表达式 "

                  原理是修改元素的的CSS属性(display)来决定实现显示还是隐藏

                  指令后面的内容最终都会解析为布尔值

                  值为真(true)的时候元素显示，值为假(false)的时候元素隐藏

                  数据改变之后呢对应的元素的显示状态也是会同步更新的

<body>
		<div id="app">
			<input type="button" value="切换显示" @click="changeIsShow" />
			<p v-show="isShow">不装了，我摊牌了，没错你要找的就是我</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var  app = new Vue({
				el:"#app",
				data:{
					isShow:false
				},
				methods:{
					changeIsShow(){
						this.isShow = !this.isShow
					}
					
				}
			})
		</script>
	</body>

2. v-if

v-if指令的作用：根据表达式的真假切换元素的显示状态
v-if = "表达式"
本质是通过操纵dom元素来进行切换显示
表达式的值为true的时候元素存在于dom树中，为false的时候从dom树中移除

<body>
		<div id="app">
			<input type="button" value="点我切换显示" @click="changeIsShow" />
			<p v-if="isShow">不装了，我摊牌了，没错你要找的就是我</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var  app = new Vue({
				el:"#app",
				data:{
					isShow:false
				},
				methods:{
					changeIsShow(){
						this.isShow = !this.isShow
					}
				}
			})
		</script>
	</body>

## 3.v-show和v-if的区别

1.原理

v-show指令：元素始终被渲染到HTML，它只是简单的伪元素设置css的style属性，当不满足条件的元素被设置style=“display：none”的样，是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏

v-if指令：满足条件是会渲染到html中，不满足条件时是不会渲染到html中的，是通过操纵dom元素来进行切换显示

2.应用场景

v-if需要操作dom元素，有更高的切换消耗，v-show只是修改元素的的CSS属性有更高的初始渲染消耗，如果需要非常频繁的切换，建议使用v-show较好，如果在运行时条件很少改变，则使用v-if较好

vue中v-if和v-for哪个优先级更高？

同层测试：v-if和v-for位于同一元素层上

<div id="demo">
        <!-- 同级测试 -->
        <p v-for='item in children' v-if="isFolder">{{item.title}}</p>
</div>
 
<script src="../vuejs/vue.js"></script>
<script>
    const app = new Vue({
        el: '#demo',
        data() {
            return {
                children: [{
                    title: 'foo'
                }, {
                    title: 'bar'
                }]
            }
        },
        computed: {
            isFolder() {
                return this.children && this.children.length > 0
            }
        }
    });
    // 输出渲染函数
    console.log(app.$options.render)
</script>

然后我们看一下，浏览器中的输出情况

我们可以在控制台打印清楚的看到有一个_l函数，这个函数就是循环渲染函数，那么在这个函数内部，我们可以看到（isFolder）这个字眼，这就是用来做判断的条件。显然，判断条件是循环函数中的；所以，从上面的代码能够得出的结论就是，每执行一次循环，就会在循环内部做一次判断，而这样做的结果就是，造成了较大的性能开销。

v-if和v-for位于不同层元素上：

<div id="demo">
        <!-- 不同级测试 -->
        <template v-if='isFolder'>
            <p v-for="item in children">{{item.title}}</p>
        </template>
</div>
<script src="../vuejs/vue.js"></script>
<script>
    const app = new Vue({
        el: '#demo',
        data() {
            return {
                children: [{
                    title: 'foo'
                }, {
                    title: 'bar'
                }]
            }
        },
        computed: {
            isFolder() {
                return this.children && this.children.length > 0
            }
        }
    });
    // 输出渲染函数
    console.log(app.$options.render)
</script>

此时，我们可以在控制台打印清楚的看到（isFolder）字眼竟然跑到了_l（循环渲染函数）函数之前，这也就意味着，此时的代码渲染，是先做判断，然后再循环，如此一来，就会大大节省代码渲染效率，节省性能。

结论：

1. 经过上述分析，显然v-for要先于v-if被执行，这是重要结论；

2. 如果它们同时出现在一个元素层，那么每次渲染都会先执行循环，然后在执行判断，无论如何，每次循环都不可避免的要执行一次判断，浪费了性能；

3. 要避免出现这种情况，则需要在外层嵌套template，在这一层进行v-if判断，然后在标签内使用v-for进行循环。

Vue指令v-if和v-show的区别