v-if和 v-show
-
v-if会销毁或创建元素及其子组件 -
v-show不会销毁和重新创建元素，仅仅是切换元素的显示状态，display
场景
- v-if适合使用在不频繁、且元素多，渲染一次性能消耗大的元素上；v-show适合使用在切换频繁显示/隐藏的元素上。
重排和重绘
- 重绘：样式的调整，比如字体颜色、背景色调整等
- 重排：页面布局发生变化，影响到元素的位置、大小或者页面的结构时，比如定位改动、元素宽高调整。重排一定会导致重绘。
结论
- v-if会导致重排和重绘
- v-show会导致重排和重绘
- 分析： v-show本质是通过元素css的display属性来控制是否显示，在DOM渲染时仍然会先渲染元素，然后才会进行判断是否显示（通过display属性），而对于重排的定义是渲染树中的节点信息发生了大小、边距等改变，要重新计算各节点和css具体的大小和位置。
当用display来控制元素的显示和隐藏时，会改变节点的大小和渲染树的布局，导致发生重排，因此v-show指令算是重排。