【今天你背面试题了吗？】简答 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次.