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

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

相同点

我们知道 v-show 和 v-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-if 的 dom 没有渲染，通过选择器是差找不到该元素。

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