v-if v-show 区别

v-if 指令可以完全根据表达式的值在 DOM 中生成或者移除一个元素。

v-show 指令是根据表达式的值来显示或者隐藏HTML元素，当值为false时，查看DOM时，会发现元素上多了一个内联样式 style = "display:none"

区别：

1、v-if 支持<template>语法，如果切换单个元素的显示隐藏，可以将v-if指令添加在单个元素标签上，如果需要切换多个元素时，则可以把 template 元素当做包装元素，并在其上使用v-if，最终的渲染结果不会包含它

v-show不支持<template>语法

2、v-if 是真正的条件渲染：在切换v-if模块时，vue.js 有一个局部编译/卸载的过程，因为v-if中的模板可能包括数据绑定或者子组件，它会确保条件块在切换时合适的销毁与重建条件块内的事件监听器和子组件

v-if 是惰性的——如果出事渲染时条件为假，则什么也不做，在条件第一次变为真时才开始局部编译（编译会被保存起来）

v-show ——元素始终被编译并保留，只是简单的基于css切换

所以 v-if 有更高的切换消耗【适于条件不大可能改变】，v-show 有更高的初始渲染消耗【适于频繁切换】

3、将v-show 用在组件上时，因为指令的优先级 v-else 会出现问题

<custom-ponent v-show = "condition"></custom-ponent>   
<p v-else>这可能是一个组件</p>

我们可以使用另一个 v-show 替换 v-else

<custom-ponent v-show = "condition"></custom-ponent>   
<p v-show = "!condition">这可能是一个组件</p>

问题解决：

组件的初始渲染：由于组件的渲染是异步的，v-show指令在组件初始渲染时可能会导致组件闪烁或显示不一致的问题。这是因为指令的优先级比组件的渲染优先级高，导致组件在初始渲染时可能会先显示出来，然后再根据v-show指令来进行显示或隐藏。

解决方法：可以在组件的根元素上使用v-cloak指令来隐藏组件的初始状态，然后使用v-show来控制组件的显示和隐藏。v-cloak指令会在组件渲染完成后自动移除，确保组件的初始状态不会被显示出来。

示例：

<template>
  <div v-cloak v-show="showComponent">
    <!-- 组件内容 -->
  </div>
</template>

组件内部的元素显示：当v-show指令用在组件内部的元素上时，由于指令的优先级较高，可能会导致元素无法正确显示或隐藏。

解决方法：可以将v-show指令应用于组件的根元素，而不是组件内部的元素。如果需要在组件内部控制元素的显示和隐藏，可以通过使用计算属性或传递props来实现。

示例：

<template>
  <div>
    <child-component :show="showComponent"></child-component>
  </div>
</template>

// ChildComponent.vue
<template>
  <div v-show="show">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  props: ['show']
}
</script>

通过以上的方法，您可以避免因为v-show指令的优先级问题而导致的显示和隐藏的不一致性。

猜你喜欢