vue中v-show与v-if的区别

Posted 2020-10-19 627laq

之前在做项目的过程中，因为有用到element-ui组件用到了v-if进行排版渲染，可能是因为v-if，会把编译缓存起来，所以切换的过程中一直会有复用的形式，导致样式怎么也不对，之后换成v-show就好了。在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。