面试题(四):v-show 和 v-if 的区别和使用场景

70 阅读1分钟

显示方式

v-if 控制 dom 的渲染

v-show 通过 css 控制 dom 的显示

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

核心是:v-if 会导致 组件(dom)的重新渲染,但 v-show 不会

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

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

在实际开发中,v-ifv-show 的使用需要根据它们的特性来进行判断,v-show 不会导致组件被销毁和渲染,但是 v-if 会导致组件被销毁和重新渲染。

正确回答

判断 v-ifv-show 的使用条件应该是:当组件需要在指定时机创建,在指定时机销毁时,需要使用 v-if,而当组件仅需要创建一次时,则可以使用 v-show