说说Vue项目中常用的v-show和v-if的理解

在Vue项目中，有时候需要显示和隐藏页面元素，Vue框架提供了条件渲染指令v-show和v-if.那么两者有什么区别呢，我们先看看官方对v-show和v-if的对比解释：官方解释v-if是“true”条件渲染，因为它会保证条件块中的条件在切换过程中，事件侦听器和子组件被适当地销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做-条件块不会开始渲染，直到条件第一次变为真。相比之下，v-show要简单得多——无论初始条件是什么，元素总是被渲染，并且只是基于CSS进行切换。一般而言，v-if的切换开销较高，而v-show的初始渲染开销较高。所以，如果你需要非常频繁地切换，最好使用v-show，如果条件在运行时很少改变，最好使用v-if。接下来我们通过代码1.v-show``效果元素被隐藏，但是我们可以看到F12和Elements中元素还在，只是显示：none；添加了属性。2.v-if效果是一样的，元素隐藏了，但是我们F12，Elements里面的元素没有了。总结一下它们的不同点1.意思：v-if是动态地向DOM树中添加或删除DOM元素；v-show是通过设置DOM元素的显示样式属性来控制显示和隐藏；2、编译过程：v-if切换有一个部分编译/卸载的过程。在切换过程中，内部事件监听器和子组件被适当销毁和重建；v-show只是基于css切换；3、编译条件：v-if是惰性的，如果初始条件为假，什么都不做；只在条件第一次为真时才开始部分编译（编译缓存？编译缓存后，切换时再进行部分卸载）；v-show在任何条件下（第一个条件是否为真）被编译然后缓存，DOM元素被保留；4、性能消耗：v-if切换消耗较大；v-show初始渲染消耗较高；5.UseScenario：v-if适用于不太可能发生变化的运行条件；v-show适合频繁切换。如果要频繁切换节点，使用v-show（不管是true还是false，一开始都会渲染，然后用css控制显示和隐藏，所以切换成本比较小，而且初始成本大），如果不需要频繁切换某个节点，使用v-if（因为懒加载，一开始为false时不会渲染，而是通过添加和隐藏来控制显示和隐藏）删除dom元素，初始渲染开销小，切换开销比较大本文来源：青年码农微信公众号责任编辑：彪凡互动