条件渲染 v-show与v-if

v-show和v-if的区别

1、渲染的机制不同
v-show是通过控制css的display元素也决定元素是否要显示，而v-if则是完全销毁与重建该元素及其子元素，当v-if条件为true时则渲染该元素并将其留在dom中，当条件为false时则将其元素及其子元素从dom中移除。

2、渲染的开销不同
v-if时惰性的，如果初始条件为false则什么也不做，也不会触发组件的生命周期钩子；只有当首次条件为true时才会渲染条件块。v-show则是不关初始条件是什么元素对会被渲染，会触发组件的生命周期钩子，所以有更高的渲染开销。

3、切换的开销不同
v-show是通过控制css的display元素也决定元素是否要显示条件块内的dom元素和组件实例会被保留，而v-if则是完全销毁与重建条件块内的dom元素和组件实例。

4、支持的功能也有所不同
v-if支持v-else、v-if-else，并且可以在template元素上使用，v-show只可以用v-show并且可以在template上使用。

5、使用的场景
v-if可以使用在那些不需要频繁改变状态的情境下，如用户的权限，平台区分等，需要在template上使用条件渲染，包装多个元素时，v-show适用与那些需要频繁切换显示状态的场景下，比如对话框，提示信息等。

v-if的使用

加载中...
加载成功
加载失败
未知状态

v-show的使用

  



首页内容
个人资料
设置