v-if和v-show和display和visibility

v-if 和 v-show

v-if会让组件重新渲染, 完整地再执行一次声明周期; v-show不会.

如果它们都是false的话, v-if什么都不会做, 这个组件也不会插到DOM树里; 如果是v-show的话, 组件还是会插到DOM树里.

至于什么时候用, 只能说看实际情况吧. 如果组件生命周期花的代价比较大, 并且执行一次就够了, 那就用v-show; 如果组件必须要通过生命周期钩子来进行初始化, 那也只能v-if了.

v-show和display

v-show相当于控制display属性, false的时候display为none, true的时候为默认值.

display和visibility

display: none;和visibility: hidden;的区别在于display: none;不参与布局树的构建, 也就是说对应的DOM节点不会出现在布局树上, 而visibility: hidden;是会参与布局的.

因此, 前者的切换会影响布局, 因为原先没参与, 后来又参与了; 后者的切换不会影响布局.

从性能上来讲的话, 前者切换的开销会稍微大一点, 因为需要浏览器重新布局, 也就是reflow. 后者只会产生repaint. 不过在现代的电脑基本都是洒洒水啦.