Vue中v-if和v-show区别

Vue 中的 v-if 和 v-show 有 3 个主要区别：1、渲染方式不同，2、性能影响不同，3、使用场景不同。 首先，v-if 是条件渲染，元素会根据条件动态地添加或删除；而 v-show 是条件展示，元素始终存在于 DOM 中，只是通过 CSS 控制显示或隐藏。其次，v-if 在切换频繁的情况下性能消耗较大，而 v-show 性能相对较好。最后，v-if 适用于运行时条件不确定的场景，而 v-show 适用于条件确定但需要频繁切换的场景。

一、渲染方式不同

1. v-if 是条件渲染

v-if 指令会根据条件动态地在 DOM 中添加或删除元素。当条件为真时，元素会被插入 DOM 中；当条件为假时，元素会被从 DOM 中移除。

<template>
<div v-if="isVisible">This is conditionally rendered</div></template><script>export default {data() {return {isVisible: true}}}</script>

1. v-show 是条件展示

v-show 指令则是通过切换元素的 CSS display 属性来控制显示和隐藏。元素始终存在于 DOM 中，只是通过 CSS 控制其可见性。

<template>
<div v-show="isVisible">This is conditionally shown</div></template><script>export default {data() {return {isVisible: true}}}</script>

二、性能影响不同

1. v-if 的性能消耗

由于 v-if 是动态地在 DOM 中添加和删除元素，因此每次条件变化时都会触发 DOM 的重建和销毁。这种操作相对较为耗费资源，尤其是在条件变化频繁的情况下。

1. v-show 的性能消耗

v-show 通过修改 CSS display 属性来控制元素的显示和隐藏，因此不会触发 DOM 的重建和销毁。相对于 v-if 来说，v-show 的性能更好，尤其是在需要频繁切换显示状态的情况下。

三、使用场景不同

1. 适合使用 v-if 的场景

v-if 适用于那些需要根据运行时条件决定是否渲染元素的场景。比如一个表单的某些部分只在特定条件下才显示，此时使用 v-if 可以避免不必要的 DOM 元素存在，提高页面的加载速度和性能。

1. 适合使用 v-show 的场景

v-show 适用于那些条件确定但需要频繁切换显示状态的场景。比如一个导航菜单的展开和折叠，或者一个需要频繁切换显示和隐藏的模态框。使用 v-show 可以避免频繁的 DOM 操作，提高性能。

四、比较总结

特性	v-if	v-show
渲染方式	动态添加或删除元素	控制元素的可见性
性能	条件变化频繁时性能差	性能较好
使用场景	运行时条件不确定的场景	条件确定但需要频繁切换