vue中的v-if和v-show使用场景为什么不能一起使用

 1.v-if和v-show都是条件渲染，通过判断条件来实现节点的显示和隐藏， 不同的时隐藏不同

v-if 如果条件为false，则不会渲染DOM元素，也就是说元素并不存在于DOM树中。如果条件为true，则会动态插入元素到DOM树中。

v-show 如果条件为false，则会将元素的样式display属性设置为none，元素仍然存在于DOM树中。如果条件为true，则会将元素的样式display属性设置为原来的值。

2.v-if 和 v-show 的使用场景：

v-if：

需要根据条件动态渲染DOM元素，减少页面渲染负担；
需要频繁切换DOM元素的显示与隐藏。
v-if是惰性的，即只有在条件为true的时候才会渲染DOM元素；
v-if有更高的切换开销，因为它会在条件改变时销毁或重建子组件，
v-show：

只是需要隐藏或显示DOM元素，不需要频繁地添加或删除DOM元素；
需要在一个组件中切换不同的子组件。
v-show总是会渲染DOM元素，只是在条件为false的时候将其隐藏。

简单来说

v-if是通过移除dom来实现隐藏

v-show是通过css display：none来实现隐藏

要记得区分场景使用

在一起使用会造成性能复杂