v-show与v-if的区别

前言

在平时开发中，避免不了经过条件来决定是否要渲染该组件，那么在判断的时候用v-show好还是v-if好呢？下面来谈谈它们的区别

区别

手段：v-if是动态的向DOM树添加或删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐

编译过程：v-if切换有一个局部编译/写在的过程，切换的过程中会适当地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换

编译条件：v-if是惰性的，如果初始条件为假，则什么都不做；只有在条件第一次变为真时才开始局部编译；v-show是在任何条件下，无论条件真假都会被编译，然后被缓存，而DOM元素保留

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

应用场景

场景一：当我们需要使用一个模态框来提示用户信息时，而这个模态框又需要根据特定的条件来进行显示和隐藏，此时可以使用v-show

场景二：当我们在一个网页中，需要用一个列表来展示一些数据，这个列表的内容需要根据数据的变化来进行动态渲染，此时可以使用v-if

总结

1.v-if可能会引起回流和重绘不过要分情况而论

(1) 当v-if条件为true时 该元素被添加到DOM树中，如果该元素的位置、大小等属性发生了变化，则会引起回流和重绘

(2)当v-if条件为true时 但是该元素的位置、大小等属性没有发生变化，亦或者使用了一些优化手段(transform/opacity),此时可能只会引起重绘而不会引起回流

(3)当v-if条件为false时,该元素会从DOM树中移除,这会引起该元素及其子元素的回流和重绘 2.v-show可能会引起重排和重绘

(1)当v-show第一次渲染时，会引起重绘和重排，在切换时也可能会引起重绘和重排

v-show的display:none不会隐藏，我的理解是因为第一次渲染的时候，浏览器计算了元素在文档流中所占据的空间，所以即使元素被隐藏了，它在原来的位置上还是会保留占据的空间。因此即使v-show对元素进行隐藏，该元素仍然会在页面上保留它所占据的空间