在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。 v-if也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。 相比之下,v-show简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。 一般来说,v-if 有更高的切换消耗而 v-show有更高的初始渲染消耗。因此,如果需要频繁切换则v-show 较好,如果在运行时条件不大可能改变 v-if 较好。
总结1:如果页面需要经常显示则选择v-show一次性渲染完成性能更好,如果页面不需要经常显示则选择v-if较好,这样对内存的消耗会很少。
v-if 是动态添加,当值为 false 时,是完全移除该元素,即 dom 树中不存在该元素。 v-show 仅是隐藏 / 显示,值为
false 时,该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示。
总结2:v-if不会和css样式有冲突问题,v-show会和display属性有冲突问题。