vue中v-if和v-show的渲染区别

概念

v-if：条件性渲染一块内容

v-show：渲染元素保留在DOM中，切换元素CSS调整显示

区别

1.本质区别

v-if：动态向DOM树增添/删除元素

v-show：修改CSS标签为display：none，控制隐藏

2.主要区别

v-if会不停销毁/创建

v-show是一次性渲染

所以性能方面，v-if有更高的切换消耗，v-show初始渲染消耗更高

综上，v-show更适合日常使用，避免不必要的操作、减少数据的渲染

3.编译区别

v-if切换时存在局部编译/销毁的过程，切换时适合监听事件和子组件

v-show会编译所有的需要数据

使用场景

v-if：元素进入页面后不会被改变显示状态时使用（隐藏元素时不用渲染此DOM，有效提升页面加载速度）

v-show：进入页面后此元素会频繁改变显示状态（例如有button按钮控制示隐藏某块区域时，只会在初次加载时渲染此DOM，后期显示隐藏不会频繁操作DOM，对性能影响小于v-if）

实际操作遇到的问题

写这篇的时候是因为遇到了多人合作项目时用到了v-show和v-if的相关操作

在一个页面使用两种样式的组件显示时，由于接口都是一个，传入的参不一样，返回值listData不一样，在使用v-for循环组件发现只能循环出最后一组参数的值，listData的值可以显示，但是无法循环到页面上。

后来发现同事在显示组件时使用的v-show导致的直接渲染的时最后一组数据，修改为v-if后显示正常，可以在切换路由的时候进行组件切换、数值传参的修改。