频繁切换v-show，不频繁使用v-if？面试的时候可别再这么说了！

Hello，大家好，我是 Sunday。

很多同学应该都在面试中遇到过这样的问题：“v-if 和 v-show 有什么区别？我们应该在什么情况下使用 v-if，什么情况下使用 v-show 呢？”

很多同学一听，这不太简单了，基础八股文啊（官网中也有明确的文档说明），瞧不起谁呢？直接来一通标准回答：“v-if 控制 dom 的渲染，v-show 通过 css 控制 dom 的显示。如果切换频繁，那么就使用 v-show，否则就使用 v-if”。

但是真实情况真的是这样吗？面试官接下来的一个问题，可能就会直接让你无法回答：“那么，什么情况下叫做切换频繁，什么情况下叫做切换不频繁呢？”

是啊，什么是频繁，什么是不频繁呢？

我们无法判断 dom 是否频繁切换

假如：有一个用户表单，表单上存在一个“角色”按钮：

图片

点击角色按钮，弹出一个 dialog 弹出层：

图片

那么此时，角色 dialog 的切换是否频繁呢？ 我相信很多同学都没有办法给出一个确切的答案吧。

所以说：

在实际开发中：开发者是无法判断 dom 是否频繁切换的。

v-if 和 v-show 的真实使用场景

我们可以回忆下日常工作中的真实场景，决定使用 v-if 和 v-show 的依据是什么呢？

其核心应该是：v-if 会导致 组件（dom）的重新渲染，但是 v-show 不会。

重新渲染就意味着：整个生命周期会重新执行。 当 v-if 为 false 时，整个组件是不存在的，而变为 true 之后，组件会重新执行所有的生命周期回调。假如我们在 created 这种生命周期钩子中执行了 接口请求 的方法，这就意味着 此时接口的请求才会触发 。如果接口触发会 依赖其他参数（如：props） 那么此时的请求时机会刚刚好。

而对于 v-show 而言，整个生命周期只会触发一次。 当 v-show 为 false 时，组件虽然看不到，但是 已经存在了。这也就意味着，假如我们在 created 这种生命周期钩子中执行了 接口请求 的方法， 此时接口已经请求了，如果接口请求中涉及到 点击之后才可以获取的参数（props），那么此时因为没有点击，所以你可能会得到一个错误。

该问题如何回答

所以，基于以上原因，这个问题大家可以这么说（以下回答仅供参考）：

Vue 官方中对 v-if 和 v-show 的使用场景区分是：当需要频繁显示和隐藏的时候，那么需要使用 v-show 否则需要使用 v-if。

但是在实际的开发中我们是 无法分辨一个场景（Dialog）是否是频繁切换的。

所以说，在实际开发中，判断 v-if 和 v-show 的使用需要根据它们的特性来进行判断。

v-show 不会导致组件被销毁和渲染，但是 v-if 会导致组件被销毁和重新渲染。

也就是说：当使用 v-show 时，虽然用户看不到组件，但是当前组件的生命周期都已经执行了。如果在 created 中存在接口的调用，则【接口已经调用完成】。同时，当组件隐藏时，组件并不会销毁。相反：如果是 v-if 的每次点击时都会重新渲染组件，重新执行生命周期，隐藏则销毁组件。

所以说，判断 v-if 和 v-show 的使用条件应该是：当组件需要在指定时机创建，在指定时机销毁时，需要使用 v-if。而 当组件仅需要创建一次时，则可以使用 v-show。