关于vuejs中v-if和v-show的区别及v-show不起作用问题

Vue中的v-if与v-show的微妙差异：与实战应用

在Vue开发中，我们经常面临这样一个选择：使用`v-if`还是`v-show`来进行条件渲染。这两者虽然都能够帮助我们实现DOM元素的显示与隐藏，但在实际运用中却存在一些微妙的差异。让我们深入一下这些差异，并结合实践进行。

一、官网概念描述

在Vue的官方文档中，`v-if`被描述为“真正的”条件渲染。这是因为当使用`v-if`时，Vue会确保在切换过程中条件块内的事件监听器和子组件得到适当的销毁和重建。这是一种惰性的行为：如果初始渲染时条件为假，那么直到条件变为真时才会开始渲染该元素。

而`v-show`则相对简单。无论初始条件是什么，元素总是会被渲染，只是通过CSS的display属性进行切换。这意味着在初次渲染时，无论条件是否成立，元素都会参与渲染流程。但当条件改变时，它的切换开销相对较低。如果你的元素需要频繁切换显示状态，那么`v-show`可能是一个更好的选择。相反，如果条件在运行时不太可能改变，那么使用`v-if`可能会更合适。

二、实践中的观察

在实际项目中，有些开发者发现使用`v-if`时，整个DOM结构不会出现在页面上；而使用`v-show`时，元素会根据条件进行显示或隐藏，但DOM结构始终存在。对于大块头的组件如el-table等，使用`v-if`可能更为合适，因为它可以确保在不需要的时候完全从DOM中移除，避免不必要的渲染开销。而对于一些暂时隐藏但需要频繁显示的元素，使用`v-show`更为方便。值得注意的是，对于`