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…