v-if和v-show的区别

175 阅读1分钟

v-show和v-if的区别

1.原理

v-show指令:元素始终被渲染到HTML,它只是简单的伪元素设置css的style属性,当不满足条件的元素被设置style=“display:none”的样,是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏 v-if指令:满足条件是会渲染到html中,不满足条件时是不会渲染到html中的,是通过操纵dom元素来进行切换显示

2.应用场景

v-if需要操作dom元素,有更高的切换消耗,v-show只是修改元素的的CSS属性有更高的初始渲染消耗,如果需要非常频繁的切换,建议使用v-show,如果在运行时条件很少改变,则使用v-if

在vue2中和vue3中的区别

在 vue2 中,v-for 优先级高于 v-if 但是在vue3中, v-if 优先级要高于 v-for 注意点:不要把 v-if 和 v-for 同时用在同一个元素上,(vue2中可以写,但是vue3中会直接提示,因为vue3中v-if优先级要高一些)带来性能方面的浪费(每次渲染都会先循环再进行条件判断). 如果需要循环渲染中的数组内容需要筛选,建议在计算属性中声明一个新的属性,返回值为筛选之后的数组