v-show和v-if的区别和对它的理解

74 阅读1分钟

一:v-show和v-if的相同点

作用效果一样,都是控制元素在页面中是否显示。 当是true的时候,都会占据页面的位置。当是false的时候,都不会占据页面的位置。

二:v-show和v-if的区别

  • 控制手段不同
  • 编译过程不同
  • 编译条件不同
  • 性能消耗不同

控制手段:v-show隐藏其实就是为该元素添加display:none;dom元素还在。v-if显示隐藏则是将整个dom元素添加或者删除

编译过程:v-if切换有一个局部编译/卸载的过程,切换中会适当的销毁或重建内部的事件监听和子组件。v-show只是css的切换。

编译条件:v-if是真正的条件渲染,它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时,并不做操作,直到为真才渲染。 v-show由false变成true的时候,不会触发组件的生命周期。 v-if由false变成true的时候,触发组件的beforeCreatecreatebeforeMountmounted钩子,由true变为false的时候触发组件的beforeDestroydestroyed方法。

性能消耗:v-if有更高的切换消耗。v-show有更高的初始渲染消耗。

三:v-if和v-show的使用场景

如果需要非常频繁的切换,则使用v-show。如果运行时条件很少改变,则使用v-if。

参考网站:mp.weixin.qq.com/s?__biz=MzU…