目录
区别:
相同点:
都可以动态控制着dom元素的显示隐藏。
不同点:
显示隐藏:
v-if: 控制DOM元素的显示隐藏,是将DOM元这个进行添加或者删除;
v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display,设置display的属性none(隐藏)或block(显示),DOM元素还存在,只是被隐藏了。
编译条件:
v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载);
v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;
编译过程:
v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;
v-show只是简单的基于css切换;
性能:
v-if:因进行频繁切换时,性能消耗过高(对DOM元素进行添加火删除),在显示隐藏方面实用的条件不大,但是在判断条件方面,就又是另外一个了;
v-show:因进行频繁切换时,性能没有太大的消耗(控制display的显示隐藏),显示隐藏方面实用性能高;
使用场景:
v-if需要操作dom元素,有更高的切换消耗,v-show只是修改元素的的CSS属性有更高的初始渲染消耗,如果需要非常频繁的切换,建议使用v-show较好,如果在运行时条件很少改变,则使用v-if较好
v-if适合运营条件不大可能改变;
v-show适合频繁切换。
优先级:
v-for优先级比v-if高
当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中,所以不推荐同时使用v-if 和 v-for。
总结:
一般来说话,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
v-for优先级比v-if高
注意事项:
- 永远不要把 v-if 和 v-for 同时用在同一个元素上,带来性能方面的浪费(每次渲染都会先循环再进行条件判断)
- 如果两者同时出现的话,那每次循环都会执行v-if,会很浪费性能,我们正确的做法应该是再v-for的外面新增一个模板标签template,在template上使用v-if,代码如下:
<div>
<template v-if="isShow">
<p v-for="item in list">
</template>
</div>
<script>
export default {
name: "Home",
components: {},
data () {
return {
list:[
{ title: "foo" },
{ title: "baz" }
]
}
},
computed: {
isShow() {
return this.items && this.items.length > 0
}
}
};
</script>
3. 如果在循环内部进行if判断,我们可以先用computed过滤出有效的展示数据,再进行渲 染,代码如下图所示:
优先级的相关知识,可借鉴下面的博客: