Vue条件渲染v-if和v-show区别以及v-if/show闪现的思考

一、v-if和v-show区别

以下摘自vue官方文档

区别	v-if	v-show
原理	初始渲染时条件为假，什么也不做；—直到条件第一次变为真时，才会开始渲染条件块。 在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。	不管初始条件是什么，元素始终会被渲染并保留在 DOM 中。 切换元素的 CSS的display属性
优缺点	有更高的切换开销	更高的初始渲染开销
适合情况	运行时条件很少改变	非常频繁地切换
<template> 元素	支持	不支持
v-else	支持	不支持

二、v-if/show闪现的思考

闪现原因：

Vue先渲染HTML DOM，等DOM加载完成，才会执行JS的编译。

在判断条件或表达式执行之前，DOM已经渲染了，之后Vue才会执行相应的JS代码，

所以使用指令v-if, v-show 或者插值表达式 {{}} 都会出现闪现的情况。

解决办法：

让想隐藏的元素在JS执行前保持不显示

• 选择在JS执行前要隐藏的元素
• 添加display:none样式

 v-cloak：保持在元素上直到关联组件实例结束编译，隐藏未编译的标签直到组件实例准备完毕。

[v-cloak] {
  display: none;
}