在Vue我的项目上，有时须要对页面元素进行展现和暗藏，Vue框架就提供了条件渲染的指令v-show和v-if。
那这两个有什么区别呢，咱们先看下官网v-show和v-if的比照解释：
官网解释
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简略得多——不论初始条件是什么，元素总是会被渲染，并且只是简略地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因而，如果须要十分频繁地切换，则应用 v-show 较好；如果在运行时条件很少扭转，则应用 v-if 较好。
接下来咱们通过代码来解释v-show和v-if的区别
1.v-show
`<template>
<div>
<div>v-show显示与暗藏</div><div v-show="show">我是要显示与暗藏的元素</div></div>
</template>
<script>
export default {
data() {
return { show:false}},
}
</script>`
成果
元素暗藏了，然而咱们F12，Elements里能够看到元素还在，只是减少了display:none;属性。
2.v-if
<template>
<div>
<div>v-if显示与暗藏</div><div v-if="show">我是要显示与暗藏的元素</div></div>
</template>
<script>
export default {
data() {
return { show:false}},
}
</script>
成果
同样成果，元素暗藏了，然而咱们F12，Elements里元素不在了。
总结下他们的不同点
1.伎俩：
v-if是动静的向DOM树内增加或者删除DOM元素；
v-show是通过设置DOM元素的display款式属性管制显隐；
2.编译过程：
v-if切换有一个部分编译/卸载的过程，切换过程中适合地销毁和重建外部的事件监听和子组件；
v-show只是简略的基于css切换；
3.编译条件：
v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始部分编译（编译被缓存？编译被缓存后，而后再切换的时候进行部分卸载);
v-show是在任何条件下（首次条件是否为真）都被编译，而后被缓存，而且DOM元素保留；
4.性能耗费：
v-if有更高的切换耗费；
v-show有更高的初始渲染耗费；
5.应用场景：
v-if适宜经营条件不大可能扭转；
v-show适宜频繁切换。
如果要频繁切换某节点时，应用v-show（无论true或者false初始都会进行渲染，尔后通过css来管制显示暗藏，因而切换开销比拟小，初始开销较大），如果不须要频繁切换某节点时，应用v-if（因为懒加载，初始为false时，不会渲染，然而因为它是通过增加和删除dom元素来管制显示和暗藏的，因而初始渲染开销较小，切换开销比拟大。
本文起源:青年码农 微信公众号
编辑:标梵互动