【面试常考】v-if与v-show的区别

在Vue中，实现条件渲染有两种指令，v-if与v-show。

1.本质区别

• vue-show本质就是通过设置标签属性display为none，来控制隐藏
• vue-if是动态的向DOM树内添加或者删除DOM元素

2.性能

• v-show只编译一次，后面的每次渲染其实就是控制css，开销较小

• v-if会根据值的真假不停的销毁和创建DOM，开销较大

  综上，故v-show性能更好一点

应用场景

• v-show:适用于频繁切换的场景
• v-if:适合于不频繁切换页面元素的场景

4.举例说明

• v-show用例代码如下：
  

• 浏览器中显示如下：我们可以看到v-show，不过就是根据变量值的真假来给标签style属性添加display:none.来控制元素隐藏，但元素并未被销毁
  

• v-if用例如下：
  -

• v-if将不满足条件为真的元素彻底销毁