if vue 跳出_vue使用v-if v-show 页面闪烁

最近在写组件时遇到一个问题，视图需要根据接口返回的数据频繁的切换状态又使用v-if时候加载出来的试图时闪烁

我们来看一下 v-if 和 v-show 的区别和优先级

v-if 和 v-show 的区别

在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

简单来说二者最大的区别是v-if只会在满足条件时才会编译，而v-show不管是否满足条件始终会编译，v-show的显示与隐藏只是简单的切换CSS的display属性。

总结

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

此外，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中，所以不推荐同时使用v-if 和 v-for。