【今天你背面试题了吗？】简答 v-if 和 v-show 的区别

回答面试题咱们可以用总、分、结合实际的方式去答

例如这题。

总：用一句话概括

他们的共同点是都可以控制元素是否可见（这里有许多友友会说控制元素的显示隐藏，我个人觉得用是否可见会更加准确，因为 v-if 如果为 false 的话是压根就没有创建这个元素的，更不谈是否隐藏了），但是他们在使用的过程中有较为明显的区别，具体的有如下几点：

接下来就可以回答分了：

• 第一、原理不同，

    v-show 是一定会渲染的，只是利用 CSS 里的 display 属性来控制元素的显示和隐藏；
  
    而 v-show 是根据条件动态创建和销毁元素。
  

• 第二、性能不同，

    v-if 在状态更新时效率比较低，在初次创建时效率高；
  
    而 v-show 在初次创建时效率比较高，在状态更新时效率低。
  
    需要频繁切换的场景用 v-show更好，不频繁切换时用 v-if。
  

• 第三、场景不同，

   举个栗子，v-show 一般可以适用于 抽屉组件、折叠面板类的组件
  
   v-if 可以用于根据不同状态显示不同的内容，例如：用户初次登录时，根据性别动态决定用户的头像等。
  

还可以在最后扩展一下，为什么要尽量避免 v-for 和 v-if 在一起使用

    因为 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，
    虽然用起来也没报错好使，但是性能不高，如果你有 5 个元素被 v-for 循环，v-if也会分别执行 5 次。