Vue中的v-show和v-if怎么理解？#

1.1 v-if#

• v-if 是真正的条件渲染指令，他根据表达式的真假来销毁或重建元素及其子组件
• 当表达式为架时，元素及其子组件将被销毁，不会被渲染到 DOM 中
• 当表达式为真时，元素及其子组件将被创建并插入 DOM 中

1.2 v-show#

• v-show 是最简单的条件展示指令，它基于 CSS 的 display 属性来切换元素的可见性
• 当表达式为假时，元素依然存在 DOM 中，只是通过设置 display:none 来隐藏它
• 当表达式变为真时，元素依然在 DOM 中，只是通过设置 display 来显示它

1.3 总结#

在使用时，如果同时在一个元素上使用了 v-if 和 v-show，v-if 的优先级要高于 v-show

这意味着 v-if 的条件为假时，元素及其子组件将不会被渲染到 DOM 中，而无论 v-show 的条件如何，元素都不会显示

因此，如果 v-if 的条件为假，即使 v-show 的条件为真，元素页不会显示出来

v-if 时动态地添加或销毁元素，而 v-show 只是简单地切换元素的可见性

1.4 如何选择#

• v-if 可以阻断内部代码是否执行，如果条件不成立不会执行内部的逻辑
• 如果页面逻辑在第一次加载的时候已经被确认后续不会频繁更改则采用 v-if

1.5 如何选择用哪一个？#

当我们回答频繁切换的时候用 v-show,不频繁切换的时候用 v-if，那么我们怎么判断是否是频繁切换的呢？

我们其实是无法判断用户是否频繁的使用 dom 切换的

所以我们需要换个回答：

Vue 官方中对 v-if 和 v-show 的使用场景的区分是：当需要频繁显示和隐藏的时候，那么需要使用 v-show 否则需要使用 v-if

但是在实际的开发中我们时无法分辨一个场景是否频繁的切换 dom 的

所以说在实际的开发过程中，判断 v-if 和 v-show 时需要根据它们的特性来进行判断的

v-show 不会导致组件被销毁和渲染，但是 v-if 会导致组件被销毁和重新渲染

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

所以说：判断 v-if 和 v-show 的使用条件应该时：当组件需要在指定时机创建，在指定时机销毁时，需要使用 v-if，而当组件仅需要创建一次时，则可以使用 v-show