v-show和v-if的区别
作用:两者都是用于在视图层根据判断条件来控制视图展示。
区别:
1. v-if是根据判断条件来动态的进行增删DOM元素,v-show是根据判断条件来动态的进行显示和隐藏元素。频繁的进行增删DOM操作会影响页面加载速度和性能,由此我们可以得出结论:
- v-if有更高的切换开销,v-show有更高的初始渲染开销。v-if会在切换过程中销毁和创建事件监听器和子组件,有较高的切换开销。v-show是改变内联样式display:none/block,有较高的初始渲染开销。
- 当您的项目程序不是很大的时候,v-if和v-show都可以用来进行判断展示和隐藏(这种场景使用v-if只是影响不大,并不是没有影响);当您的项目程序比较大的时候,不推荐使用v-if来进行判断展示和隐藏,推荐使用v-show;
2. v-show原理:浏览器只是根据判断条件在更改内联样式,条件为真的时候内联样式display:block;条件为假的时候内联样式更改为display:none。v-show实际上比v-if的性能更高,因为v-show只是动态的更改样式而不需要增删DOM元素。
3. 只有v-if能和v-else连用进行分支判断,v-show是不能和v-else连用的,如果出现多种条件场景的情况下,可以使用v-if来进行判断

浙公网安备 33010602011771号