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...