v-if和v-show的区别

[TieMuZhen]

一、v-show

指令表达式的值为true就显示，为false就隐藏。显示和隐藏是基于css的样式切换，类似于visibility属性。即使一开始条件为false，内容也会被渲染在文档中，只是由css样式控制隐藏而已。

二、v-if

在首次渲染的时候，如果条件为假，什么也不操作，页面当作没有这些元素。当条件为真的时候，开始局部编译，动态的向DOM元素里面添加元素。当条件从真变为假的时候，开始局部编译，卸载这些元素及其子元素，也就是删除。

三、性能方面

v-if绝对是更消耗性能的，因为v-if在显示隐藏过程中有DOM的添加和删除，v-show只是操作css。

四 、使用场景

如果是一些固定的，条件内容都不怎么会改变的，频繁切换的，使用v-show会比较省性能。如果是子组件，每次切换子组件不执行生命周期，使用v-show，如果子组件需要重新执行生命周期，那么使用v-if才能触发。

五、类比visibility:hidden; 和 display:none;

1、display:none;

将display设置为none会将元素从可访问性树accessibility tree中移除。这会导致该元素及其所有子代元素不再被屏幕阅读技术screen reading technology访问。

2、visibility:hidden;

visibility显示或隐藏元素而不更改文档的布局