频繁切换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。

前端训练营:1v1私教,终身辅导计划,帮你拿到满意的 offer 已帮助数百位同学拿到了中大厂 offer

私聊领取:Sunday 独家整理 大厂面试题大厂真实面经

相关推荐
行板Andante7 分钟前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam39 分钟前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8501 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏1 小时前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句3 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6663 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞3 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js