面试中被问了 v-if
和 v-show
的区别,现场答得不是很好,重新总结一下
v-if
<body>
<div id="app">
<div v-if="judge"><p>v-if</p></div>
<button @click="pChange">Change</button>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
judge:true,
},
methods:{
pChange(){
this.judge=(this.judge==true?false:true);
}
}
})
</script>
用chrome浏览器的开发者模式,发现当 v-if
绑定值为 true 时, 该条件块被渲染
当单击Change按钮,使绑定值更改为false后,该条件块不被渲染出来
v-if
是惰性的,如果在初始渲染时条件为假,则什么也不做,直到条件第一次变为真时,才会开始渲染条件块。
总结,使用 v-if
,内容只会在指令的表达式返回 true 值的时候被渲染。
v-else-if,v-else
<body>
<div id="app">
<div v-if="type === 'A'"> A </div>
<div v-else-if="type === 'B'"> B </div>
<div v-else-if="type === 'C'"> C </div>
<div v-else> Not A/B/C </div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
type:'D',
},
})
</script>
v-else-if
,充当 v-if
的 else-if 块,可以连续使用;
v-else
,v-else-if
必须紧跟在带 v-if
或者 v-else-if
的元素之后。
v-show
<body>
<div id="app">
<div v-show="judge"><p>v-show</p></div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
judge:true,
},
})
</script>
用法和 v-if
基本一致
同样地,用chrome浏览器的开发者模式,发现当 v-show
绑定值为 true 时,条件块被渲染
而当 v-show
绑定值为false时,条件块同样也被渲染,只是切换了属性 display: none
v-show
的元素始终会被渲染并保留在 DOM 中,只是简单地切换元素的属性
总结
v-if
是真正意义上的条件渲染,确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show
则简单许多,元素始终会被渲染,只是基于CSS切换
故一般来说,v-if
有更高的切换开销,而 v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show
较好;如果在运行时条件很少改变,则使用 v-if
较好。