v-if 和 v-show 的主要区别在于实现机制和适用场景。1. v-if 是条件渲染，根据表达式真假决定是否创建或销毁元素，元素可能不会出现在 dom 中；2. v-show 则通过切换 css 的 display 属性控制显示，元素始终存在于 dom 中。性能上，v-if 适合运行时很少改变的条件，而 v-show 适合频繁切换的场景。3. 使用场景方面，v-if 适用于页面生命周期中极少切换的内容，如用户登录状态判断；v-show 更适合频繁打开关闭的组件，如弹窗。4. 另外，v-if 可与 配合包裹多个元素，而 v-show 必须作用于单个元素，需包裹容器才能控制多个元素。理解这些区别有助于避免性能浪费和渲染错误。
v-if 和 v-show 都是 Vue 中用来控制元素显示隐藏的指令，但它们在实现机制和适用场景上差别挺大的。
实现方式不同
v-if 是“真正”的条件渲染。
它会根据表达式的真假决定是否创建或销毁元素。如果条件为假，元素压根不会出现在 DOM 里。等条件变为真时，才会重新创建该元素。
立即学习“前端免费学习笔记（深入）”；
而 v-show 只是切换 CSS 的 display 属性。不管条件是真是假，元素始终会被渲染到 DOM 中，只是通过 display: none 来控制是否显示。
举个例子：
这个 div 不会在 DOM 中这个 div 会以 display:none 存在
所以从性能角度看，v-if 有更高的切换开销，适合运行时很少改变条件的场景；v-show 切换开销小，适合频繁切换显示状态的情况。
使用场景建议
适合用 v-if 的情况：
Modoer 是一款以本地分享，多功能的点评网站管理系统。采用 PHP+MYSQL 开发设计，开放全部源代码。因具有非凡的访问速度和卓越的负载能力而深受国内外朋友的喜爱，不局限于商铺类点评，真正实现了多类型的点评，可以让您的网站点评任何事与物，同时增加产品模块，也更好的网站产品在网站上展示。Modoer点评系统 2.5 Build 20110710更新列表1.同步 旗舰版系统框架2.增加 限制图片
- 元素在页面生命周期中只出现一次或极少切换。
- 页面加载时不需要立刻显示，而且后续可能也不会显示的内容。
- 比如首次加载时判断用户登录状态，展示不同的内容块。
适合用 v-show 的情况：
- 需要频繁切换显示/隐藏的状态。
- 组件初始化成本较高，重复创建会影响性能。
- 比如一个弹窗组件，经常被打开关闭。
如果你不确定选哪个，可以记住一句话：“不常变的用 v-if，经常变的用 v-show。”
与
还有一个细节容易忽略的是，v-if 可以和 标签一起使用，来包裹多个元素。
比如：
标题
内容段落
而 v-show 就不能这样用了，因为它只能作用在单个元素上。如果你想让多个元素一起切换显示，就得给每个都加 v-show，或者在外层套一个容器。
基本上就这些区别了。理解清楚这两个指令背后的机制，就能避免不必要的性能浪费或者渲染错误。
