vue 中 v-if 和 v-show 的区别是什么

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 90

Author 回答者: zhaofeihao

v-show always compiles and renders everything - it simply adds the “display: none” style to the element. It has a higher initial load cost, but toggling is very cheap. Incomparison, v-if is truely conditional: it is lazy, so if its initial condition is false, it won’t even do anything. This can be good for initial load time. When the condition is true, v-if will then compile and render its content. Toggling a v-if block actually tearsdown everything inside it, e.g. Components inside v-if are acually destroyed and re-created when toggled, so toggling a huge v-if block can be more expensive than v-show.

v-show 总是会进行编译和渲染的工作 - 它只是简单的在元素上添加了 display: none; 的样式。v-show 具有较高的初始化性能成本上的消耗，但是使得转换状态变得很容易。 相比之下，v-if 才是真正「有条件」的：它的加载是惰性的，因此，若它的初始条件是 false，它就不会做任何事情。这对于初始加载时间来说是有益的，当条件为 true 时，v-if 才会编译并渲染其内容。切换 v-if 下的块儿内容实际上时销毁了其内部的所有元素，比如说处于v-if下的组件实际上在切换状态时会被销毁并重新生成，因此，切换一个较大v-if块儿时会比v-show消耗的性能多。

Author 回答者: peipeiyinuo

渲染方式 ：

• v-if：v-if 是“惰性渲染”的。它只有在条件为 true 时才会渲染该元素，条件为 false 时，元素会从 DOM 中被完全移除。这意味着如果v-if的条件很少变化，Vue 会在元素第一次被渲染时创建它，并且当条件变为 false 时，会销毁该元素，再次变为 true 时会重新创建该元素。如果是组件会重新执行该组件生命周期内的函数。
• v-show： v-show 是“始终渲染”的。它总是会将元素渲染到 DOM 中，只是通过 display 样式来控制其显示或隐藏（即通过display: none 来隐藏元素）。当条件变化时，v-show并不会销毁元素，而只是改变元素的 display 样式，从而控制其是否显示。

性能开销 ：

• v-if:：v-if 的性能开销较大，因为每次条件改变时，都会重新渲染或销毁元素。当元素频繁显示/隐藏时，v-if 的性能较差。适用于在初始化时条件较少变化的情况。
• v-show：v-show 的性能开销较小，因为它始终保留在 DOM 中，只是通过 display 属性来控制显示与否。适用于元素频繁显示和隐藏的场景，尤其是在条件变化较频繁时。

适用场景：

• v-if：适合于条件判断不频繁变化的情况，或者需要完全销毁和重建 DOM 元素的场景。比如根据条件来控制加载某个组件或列表项时使用 v-if。
• v-show：适合于条件频繁变化的场景，比如切换标签、菜单等，在这种情况下，v-show 比 v-if 更高效，因为不需要频繁的销毁和创建 DOM 元素。

初始渲染 ：

• v-if：在初始渲染时，如果条件为 false，元素完全不会被渲染到 DOM 中。
• v-show：v-show 会始终渲染元素，只是元素会被隐藏（display: none）。

内存开销：

• v-if：由于 v-if 会销毁元素并重新创建，所以它的内存开销会较大，特别是在频繁切换的情况下。（频繁销毁和重建 DOM）
• v-show：v-show 仅控制元素的显示状态，因此它的内存开销较小，适合频繁切换的场景。

这里要注意，如果是控制的组件显示隐藏的话，v-show不管显示还是隐藏会触发组件的全部声明周期，就要注意有没有一些没有必要的请求会被触发，减少不必要的 性能开销