v-if 和 v-show

v-if 和 v-show

当 v-if 和 v-show 的条件发生变化时, v-if 引起了 dom 操作级别的变化,而 v-show 仅发生了样式的变化,从切换的角度考虑, v-show 消耗的性能要比 v-if 小。

除此之外, v-if 切换时, Vue.js 会有一个局部编译 / 卸载的过程,因为 v-if 中的模板也可能包括数据绑定或子组件。 v-if 会确保条件块在切换当中适当地销毁与中间内部的事件监听器和子组件。而且 v-if是惰性的,如果在初始条件为假时, v-if 本身什么都不会做,而v-show 则仍会进行正常的操作,然后把 css 样式设置为 display:none。

所以,总的来说, v-if 有更高的切换消耗,而 v-show 有更高的初始渲染消耗,我们需要根据实际的使用场景来选择合适的指令。