v-show 和 v-if 有什么区别?使用场景分别是什么?

本贴最后更新于 1415 天前,其中的信息可能已经时过境迁

这个题目考察的是面试者对 vue 的基础知识的理解.

相同点

我们知道 v-showv-if 都是 vue 的内置指令,目的是判断一个 dom 节点是否显示,值为 true 则显示,比如:v-if="a===1",当 a 为 1 的时候,该 dom 就会显示。那么他们共同点就是控制一个 dom 是否显示。

区别

v-if 不显示 dom 时,dom 是会从文档流中移除的,浏览器是不用渲染这个 dom 的,而且该指令可以放在 template 节点上面,可以配合 v-else 使用,这使得它的使用很灵活。


v-show 不显示 dom 时实际上是通过内联样式 display 来控制 dom 是否显示的,换句话说,就是 dom 还是会渲染,只是有样式控制了它隐藏,它不能跟 v-else 配合使用,也不能放在 template 节点上使用,必须作用在一个具体的元素上面,这点也增加的它是使用局限。


不同的使用场景

当有 dom 节点需要频繁显示隐藏的时候,建议使用 v-show,因为不用频繁的从虚拟节点转换为真实节点,节省性能。相反频率低的时候建议用 v-if,因为浏览器少渲染一个 dom,节省性能。当需要 dom 操作的时候必须使用 v-show,因为 v-ifdom 没有渲染,通过选择器是差找不到该元素。

学习如逆水行舟,不进则退,前端技术飞速发展,如果每天不坚持学习,就会跟不上,我会陪着大家,每天坚持推送博文,跟大家一同进步,希望大家能关注我,第一时间收到最新文章。

  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    261 引用 • 662 回帖 • 2 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
zhujie
每天一个前端技术问题,可以关注我的公众号查看。 深圳