【前端面试题】Vue项目中 v-if 和 v-show 的区别

v-if 和 v-show 的区别

是什么？

区别在哪里？

方式不一样

编译不一样

性能不一样

使用场景不一样

---

是什么？

v-if 和 v-show 都是可以通过条件，判断是否显示的，用法如下：

<template>
  <div class="about">
    <button v-if="1 == 2">按钮1</button>
    <button v-show="1 == 2">按钮2</button>
    <button>按钮3</button>
  </div>
</template>

 

从控制台可以看到 按钮1 使用的是 v-if，无法看到这个按钮的代码内容，也便无法在浏览器上显示。 按钮2 使用的是 v-show ，可以看到这个按钮的代码内容，但是 style 中增加了一个 display: none 的css。

区别在哪里？

方式不一样

v-if：操作 DOM

v-show：操作 style（display） 

编译不一样

v-if ：DOM编译和卸载的过程，它是惰性的，条件为真时开始局部编译

v-show：基于css

性能不一样

 v-if：消耗高（因为要操作dom）

v-show：消耗低，适合频繁切换

使用场景不一样

v-if：适合业务相对复杂的场景

v-show：适合频繁切换的场景

 以上就是vue项目中v-if 和 v-show 的区别。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享，一起进步，加油。