了解了解v-if和v-show

在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 适合频繁切换