在vue中我们经常用到的两个属性v-if和v-show,那么这两者有什么共同点和不同点呢?
一.相同点和不同点:
在实际使用中我们可以通过v-if或者是v-show来动态控制 DOM 元素的显示隐藏,
列如:当v-if和v-show值为假时,绑定的元素都不会在页面中显示
<div v-show="0">1111</div>
<div v-if="0">222</div>
但是在控制台中我们可以看见:
由上可以:
相同点:
- v-if 与 v-show 都可以动态控制 DOM 元素的显示隐藏。
不同点:
- v-if 是动态的向 DOM 树内添加或者删除 DOM 元素;v-show 是通过设置 DOM 元素的 display 样式属性控制显示隐藏,DOM 元素保留
二.特性:
根据上述案例可以理解,当我们使用v-if对dom元素进行显示和隐藏操作时,是对dom元素进行一个删除和构建的过程,在元素重复创建的过程中会有大量的性能消耗问题,而在使用v-show对dom元素进行操作只是简单的css操作.所以当我们频繁的需要隐藏和出现就用v-show
三.总结:
相同点: v-if 与 v-show 都可以动态控制 DOM 元素的显示隐藏
不同点:
-
v-if 是动态的向 DOM 树内添加或者删除 DOM 元素;v-show 是通过设置 DOM 元素的 display 样式属性控制显示隐藏,DOM 元素保留;
-
v-if 切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show 只是简单的基于 CSS 切换;
-
v-if初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载);
v-show 是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且 DOM 元素保留; -
v-if 有更高的切换消耗;v-show 有更高的初始渲染消耗;
-
v-if 适合运营条件不大可能改变;v-show 适合频繁切换