面试官：v-show和v-if的区别？

<template>
  <div>
    <div v-if="show">显示</div>
    <div v-show="show">显示</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
};
</script>

区别

1、v-show只是为元素添加样式display:none；，dom元素依然存在，v-if是将dom元素整个添加或删除；

共同点

1、当show为true的时，都会占据页面的位置；
2、当show为false的时，都会不占据页面的位置；

使用场景

v-if 相比 v-show 会较大的影响性能（v-if直接操作dom节点增加与删除）
如果元素会频繁的改变显示状态，则使用 v-show 较好；
如果显示状态很少改变，则使用 v-if 较好；