v-show 都会重绘和重排

v-show 是 Vue.js 框架中的一种指令，用于根据条件控制元素的显示和隐藏。与 v-if 指令类似，v-show 也可以根据条件来决定元素是否显示，但是它的实现方式略有不同。

v-show 的实现原理是通过 CSS 的 display 属性来控制元素的显示和隐藏。当条件为真时，display 属性被设置为默认的初始值（通常为 "block"），因此元素会被显示出来；当条件为假时，display 属性被设置为 "none"，元素则会被隐藏。

由于 v-show 是通过 CSS 控制元素的显示和隐藏，所以在切换显示状态时，并不会触发重绘和重排。重绘和重排是浏览器在对页面进行渲染时产生的操作，它们会重新计算和绘制页面的布局和样式。

相比之下，使用 v-if 指令来控制元素的显示和隐藏，则会引起重绘和重排。因为 v-if 的实现原理是通过 DOM 操作来添加或移除元素的，这会引起浏览器对页面进行重新布局和绘制。

因此，相对于 v-if，v-show 的性能更好，适用于频繁切换显示状态的情况。但需要注意的是，在元素的初始渲染时，v-show 会将元素的初始样式设置为显示状态，这可能会导致页面在加载时出现短暂的闪现。如果对页面的初始加载速度要求较高，可以考虑使用 v-if 或其他优化手段来避免这个问题。

相关问题

vue v-show是重绘吗

Vue中的v-show指令用于根据条件来显示或隐藏元素。条件为真时元素会显示；当条件为假时，元会隐藏。与v-if指令不同的是，v-show指令只是通过修改元素的CSS属性来控制显示与隐藏，并不会对DOM结构进行重绘。

具体来说，当使用v-show指令时，Vue会在元素上添加一个CSS样式"display: none;"来隐藏元素。当条件为真时，Vue会将该样式移除，使元素显示出来；当条件为假时，Vue会再次添加该样式，使元素隐藏起来。这个过程只涉及到CSS样式的修改，不会引起DOM结构的重新渲染。

因此，相比于v-if指令，v-show指令在切换显示与隐藏时的性能更高，适用于需要频繁切换显示状态的场景。但需要注意的是，由于元素始终存在于DOM中，即使被隐藏起来，所以在某些情况下可能会占用一定的内存空间。

v-show会产生重绘

v-show会在DOM中添加或删除元素，从而触发重绘。当使用v-show指令控制元素的显示与隐藏时，Vue会通过修改DOM的CSS样式来实现。当元素需要被隐藏时，Vue会添加`display: none;`样式来隐藏该元素，此时元素并不会被移除，只是不可见而已。而当元素需要被显示时，Vue会取消`display: none;`样式，使元素重新可见。

这种操作会引起DOM的重新布局和绘制。当元素被隐藏时，其他元素会重新调整布局，以填补被隐藏元素所占据的空间。当元素重新显示时，其他元素会再次调整布局，以腾出空间来容纳这个元素。这样的重绘操作会导致浏览器重新计算页面布局，并进行相应的绘制操作，从而影响页面的性能。

因此，频繁地使用v-show来控制元素的显示与隐藏会产生频繁的DOM操作和重绘，这可能会影响页面的加载速度和性能。如果页面中需要频繁切换元素的显示与隐藏，可以考虑使用v-if指令代替v-show。v-if会根据条件动态地添加或删除元素，而不仅仅是修改元素的CSS样式，可以更好地优化页面性能。