v-show 与 v-if 比较 - Vue

v-show 另一个用于根据条件展示元素的选项，类似于 v-if；

与 v-if 不用的是使用 v-show 的元素始终会被渲染并保留在 DOM 中，它只是简单的切换元素的 css 属性。

注：v-show 不支持 <template> 元素，也不支持 v-else

 

<template xmlns="http://www.w3.org/1999/html">
    <div class="YHStydy">
        <h3>2.6 v-show & v-if</h3>
        <h4>2.6.1 if</h4>
        <span v-if="stateNormal">normal(if)</span>
        <span v-if="stateError">error(if)</span>

        <h4>2.6.2 show</h4>
        <span v-show="stateNormal">normal(show)</span>
        <span v-show="stateError">error(show)</span>
        <br/>
        <span v-show="0<1">max(show)</span>
        <span v-show="0>1">min(show)</span> 
    </div>
</template>

<script>
export default {
  name: 'y-h-study',
  data() {
    return {
        stateNormal: true,
        stateError: false,
    }
  }
}
</script>

首先，v-if 执行后如果判断条件为 false 的情况下，它便不会生成其标签，仅会将 true 状态的内容渲染出来，其效果如下：

其次，v-show 执行后如果判断条件为 false 的情况下，依然会生成条件为 false 的标签，但其标签对应的属性则会设置为 style="display: none;"，其效果如下：

最后，通过如上测试可以得知：

v-if 也是惰性的，若初始渲染时条件为真(true)时渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，反之则什么也不做直到条件变为真时，才会进行渲染条件块；

v-show 则无论初始条件的真伪元素总会被渲染并且是基于 css 进行样式的切换；

两者间相比较 v-if 在状态切换时占据开销更高于 v-show，而 v-show 在初始渲染时占据的开销更高于 v-if；若状态需要频繁的进行切换则使用预先渲染好进行样式切换的 v-show 更占优，若运行时条件切换较少的情况下则使用 v-if 更占优。

 

——————

以上便是此次内容的小结，还望大神多多指教！