简述 v-if 和 v-show 的区别 ？
参考回答
v-if 和 v-show 都是 Vue 中用于条件渲染的指令，它们的作用是根据条件决定是否渲染元素，但它们在实现方式和性能方面有显著的区别。
- v-if：基于条件来动态渲染或销毁元素。条件为
false时，元素会被完全移除，且不会占用任何 DOM 结构。 - v-show：始终渲染元素，但通过设置
display样式来控制元素的可见性。当条件为false时，元素仍然在 DOM 中，只是被隐藏。
详细讲解与拓展
1. v-if：
v-if 会根据条件动态地决定是否渲染元素，条件为 false 时，元素会被完全从 DOM 中移除。v-if 是惰性渲染，只有当条件为 true 时，元素才会被创建并插入到 DOM。
- 优点：
- 在初始渲染时不需要将不需要的元素加入到 DOM，节省了 DOM 元素的创建和更新。
- 当条件改变时，会重新创建和销毁元素，适合用在条件变化较少或比较复杂的场景中。
- 缺点：
- 条件频繁变化时会导致频繁的 DOM 操作，性能较差。
<template>
<div>
<button @click="toggle">Toggle</button>
<p v-if="isVisible">This is a visible paragraph.</p>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
}
},
methods: {
toggle() {
this.isVisible = !this.isVisible;
}
}
}
</script>
2. v-show：
v-show 总是会渲染元素到 DOM 中，唯一的区别是通过 display: none 样式来控制元素的可见性。如果条件为 false，元素依然存在于 DOM 中，只是变为不可见。与 v-if 不同，v-show 只是切换元素的显示与隐藏，而不会销毁和重建元素。
- 优点：
- 适合频繁切换显示状态的元素，性能较好，因为不需要销毁和重建元素。
- 缺点：
- 无法避免不需要的元素出现在 DOM 中，虽然它是不可见的，但仍然存在。
<template>
<div>
<button @click="toggle">Toggle</button>
<p v-show="isVisible">This is a visible paragraph.</p>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
}
},
methods: {
toggle() {
this.isVisible = !this.isVisible;
}
}
}
</script>
性能比较
- v-if：
- 初次渲染时会对 DOM 进行创建和销毁，适合条件变化较少的场景。
- 由于
v-if会删除元素和重新创建它，所以在条件变更时性能开销较大。
- v-show：
- 适合频繁切换的场景，因为元素始终存在于 DOM 中，只是切换
display属性来控制显示与隐藏。 - 在元素隐藏时，不会对页面的布局造成影响，因此性能开销较小。
- 适合频繁切换的场景，因为元素始终存在于 DOM 中，只是切换
总结：
- v-if：适合条件不频繁变化，且需要完全渲染或销毁元素的场景。
- v-show：适合频繁切换元素显示与隐藏的场景，因为它不会销毁元素，只是通过样式控制可见性。