v-if 和 v-show 有什么区别

130 阅读1分钟

一、 v-ifv-show 有什么区别?

1.1、v-ifv-show 的真实使用场景
  • v-if会导致 组件(dom)的 重新渲染,但是v-show不会。
  • 重新渲染:整个生命周期重新执行。当 v-iffalse 时,整个组件是不存在的,而变为 true 之后,组件会重新执行所有的生命周期回调。

解释

  1. 我们在 created 这种生命周期钩子中执行了 接口请求 的方法,这就意味着 此时接口的请求才会触发 。如果接口触发会 依赖其他参数(如:props) 那么此时的请求时机会刚刚好。
  2. 对于 v-show 而言,整个生命周期只会触发一次。v-showfalse 时,组件虽然看不到,但是 已经存在了

二、我们应该在什么情况下使用 v-if,什么情况下使用 v-show 呢?

官方答案:当需要 频繁显示和隐藏 的时候,那么需要使用 v-show 否则需要使用 v-if

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

总结:当组件需要在指定时机创建,在指定时机销毁时,需要使用 v-if。而 当组件仅需要创建一次时,则可以使用 v-show