vue中v-show指令与v-if指令到底有那些区别？又如何使用？

v-show指令与v-if指令到底有那些区别？
最主要的区别其实在于渲染，用v-show无论绑定的值为true或者false都会渲染dom。如下图在guiplan开发工具中将副标题的显示条件（v-show指令)设置为false,副标题虽然被隐藏了，但dom元素依然存在。只是强制给副标题添加了一个display:none样式进行了一个隐藏操作。

而我们继续用v-if指令，可以看出整个的副标题h3直接去掉了，也就是根本就不会给你进行渲染。

什么时候用v-show，什么时候用v-if呢？
了解到了他们的区别之后，我们才能更好的去理解，去使用。首先v-show指令会提前渲染dom,所以做显示与隐藏切换时缓存的dom开箱即用并不会加大性能的损耗，而v-if指令如果频繁的切换，会不断的销毁dom与重新创建dom会造成一定的性能损耗，特别是要渲染的场景过于复杂时。所以v-show指令适合频繁的切换。比如tab切换，下拉框显示等。以下是记单词一个项目截图，当点击tab切换时所有的图片与字母都进行了隐藏，点击查看单词按钮即可显示完整的图片与单词。这里就比较适合v-show指令做频繁的切换。

这么看来好像用v-show指令就够了？事实并非如此，但什么时候用v-if指令呢？其实有很多场景不需要频繁切换的，我们都可以用v-if指令。并且v-if还支持多条件判断。我们来看如下场景，在记单词游戏中可以看到里面有图片，中文，英文单词 三种显示模式，而这三种模式我们只需显示一种即可，并且并不需要频繁切换，这样我们就可以使用v-if指令。如果类型为图片类型则显示图片，中文类型则显示中文，英文类型则显示英文。如果含有更多的类型，则可以接续用else if指令，实现多条件判断。并且显示一种之后其他不满足条件的都不会被渲染，这样极大降低了不必要的渲染过程，提高性能。

原文转载 http://www.guiplan.com/articl...