Vue.js学习笔记：v-show与v-if区别

区别

相同点：v-if 与 v-show 都可以动态控制显示隐藏效果；

不同点：v-if 是动态的向 DOM 树内添加或者删除 DOM 元素来实现显示隐藏，v-show 是通过设置 DOM 元素的 display 样式属性。

要注意的是，如果 css 中设置了元素的 display 样式属性，效果会有冲突。 

根据官方文档描述：

v-if 是 “真正” 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。    

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

闪烁问题

Vue 要等到 HTML DOM 加载完成后才会执行 JS 的编译，所以对使用的指令如 v-if , v-show 或者使用了插值表达式 {{}} 都可能会出现闪烁的情况（在页面层次结构，数据较多的时候）。因为在这些判断条件或表达式执行之前，DOM 已经渲染出来了，之后 Vue 才会执行相应的 JS 代码。

解决方法：使用 v-cloak 指令

该指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

	[v-cloak] {
	display: none;
	}



	{{ message }}

参考

官方文档（区别）：https://cn.vuejs.org/v2/guide/conditional.html#v-show

官方文档（v-cloak）：https://cn.vuejs.org/v2/api/index.html#v-cloak

博客（区别）：https://www.cnblogs.com/wmhuang/p/5420344.html

博客（闪烁）：https://www.jb51.net/article/148705.htm

博客（闪烁）：https://www.jb51.net/article/148701.htm