[JavaScript知识库]v-show和v-if

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>