v-show和v-if的区别
v-show和v-if都是vue中进行条件渲染的指令。
1、v-show和v-if控制元素显示与隐藏的方式不同
v-show是通过控制dom元素的display属性来控制元素的显示与隐藏；而v-if是直接在dom树中添加或者删除元素来控制元素的显示与隐藏。
元素处于显示状态：
元素处于隐藏不可见状态：
?
?可以看到当元素处于可见状态时，元素的属性并没有什么区别，但是当设置v-show和v-if为false时，就可以看出明显的差别——v-show控制的元素多了display:none属性，而被v-if控制的元素直接就被移除了dom树中。
2、v-if和v-show在第一次渲染时的差别
如果条件为false时，v-if控制的元素不会进行渲染，而v-show控制的元素会进行渲染，元素会被添加到dom元素中，只是不会显示。
3、v-if和v-show在切换过程中的不同
切换条件时，v-if控制的元素会进行销毁和重建，而v-show控制的元素只是进行css切换。
4、v-if和v-show在性能方面的消耗
如果进行不断的条件切换时，因为v-if会对元素进行销毁和重建，所以消耗的性能更大；v-show只是对css进行变更，所以消耗的性能更小。
问题：当DOM元素的v-show属性设置为false时，绑定在该DOM元素上的事件是否还会响应?
当条件为false时，v-if控制的元素会直接被移除，所以此时触发绑定在元素上的事件是不会响应的。而v-show控制的元素即使条件为false也会被添加到dom树上，那此时触发绑定在该元素上的事件会响应吗？
经过测试可以发现，当条件为false时，触发v-show控制的元素绑定的事件时，事件不会响应。
测试代码
<template>
<div>
<div>
<h3>v-show</h3>
<button @click="changeVShowFlag">显示/隐藏</button>
<div v-show="vShowFlag" class="demo-wrap" @click="clickVShow">v-show</div>
</div>
<div>
<h3>v-if</h3>
<button @click="changeVIfFlag">显示/隐藏</button>
<div v-if="vIfFlag" class="demo-wrap">v-if</div>
</div>
</div>
</template>
<script>
export default {
name: "VShowDemo",
data() {
return {
vShowFlag: true,
vIfFlag: true,
};
},
methods: {
changeVShowFlag() {
this.vShowFlag = !this.vShowFlag;
},
changeVIfFlag() {
this.vIfFlag = !this.vIfFlag;
},
clickVShow() {
console.log("clickVShow 方法执行了");
},
},
};
</script>
<style scoped>
.demo-wrap {
width: 100px;
line-height: 30px;
border: 1px solid gainsboro;
margin-top: 3px;
text-align: center;
}
</style>